axios

node裏的app.use是在聲明使用一箇中間件，use裏的中間件是個函數，是能夠對咱們的請求或響應作特定處理的函數

 

這裏是post請求，post請求參數使用請求體攜帶，但請求體攜帶有兩種格式：

1.name=tom&&pwd=123  :是urlencoded的形式  這個服務器都接受的  但json格式就不必定

app.use(express.urlencoded({extended:true}))

 

2.app.use(express.json()) //請求參數是json結構{name:'tom",pwx:123}

本質上都是文本字符串，就是格式不同  

 

若是後臺沒有使用2這個中間件，那麼後臺沒法解析Json格式的參數

 

若是公司項目只支持1的格式，axios默認只用json格式請求體攜帶參數數據，可是後臺不支持

axios的data是對象格式，後臺不支持，咱們要把data轉成後臺支持的，不必本身拼

 

post請求體參數格式

1）Content-Type:application/x-www-form-urlencoded;charset=utf-8

　　用於鍵值對參數，參數的鍵值用=連接，參數之間用&連接

2）Content-Type:application/json;charset=utf-8

　　用於json字符串參數 {name:'fds";pwd:12}

3)Content-Type:multipart/form-data

　　用於文件上傳請求

 

axios裏有個工具包  叫qs  安裝好axios後自動帶有qs  

const qs = require('qs')

import qs from 'qs'
const data = {"bar":123}
const option = {
    method:'post',
    headers:{'content-type':'application/x-www-form-urlencoded'}
    data:qs.stringfy(data),
    url
}
axios(option)

但之後每次請求都要qs.stringfy不方便

這時候用axios的一個技術語法，叫攔截器interceptors

axios.interceptors.request.use請求攔截器

axios.interceptors.response.use響應攔截器

 

攔截器本事本質上是個函數

axios.interceptors.request.use(function(config){

})

<script>
import axios from 'axios'
import qs from 'qs'

//添加請求攔截器:讓post請求的請求體格式爲urlencoded格式  a=1&b=2
//在發請求前執行
axios.interceptors.request.use(function(config){
    
    //獲得請求方式和請求體數據
    const {method,data} = config
    //處理post請求，將data對象轉換成query參數格式字符串
    if(method.toLowerCase==='post' && typeof data==='object'){
        config.data = qs.stringify(data)
    }
    return config
})

export default axios

</script>

 

axios是基於promise的

axios（{}）.then(res=>{}) //res獲得的是返回來的對象，包含一堆東西，有status,data等...

res.data獲得的纔是後端返回給咱們的數據

若是要判斷服務器層面的請求成功與失敗，應該在res.status裏看

這時候用響應攔截器統一判斷

<script> Login.js

 handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            reqLogin(values).then(res=>{

            },
　　　　　　　　err=>{ //這個是在axios.intercepter.response裏的function(error)裏先執行完後再執行這裏的error  也就是執行了兩次，
　　　　　　　　　　　　　　並且信息也是同樣的，是瀏覽器請求失敗的信息，並無拿到後端給的信息，
　　　　　　　　　　　　　　因此這裏回調的err沒有什麼用，應該在axios.intercepter裏統一作瀏覽器請求失敗處理,因此這個err函數能夠刪除不用
              alert('請求失敗了'+err.message) //使用了return new Promise(()=>{}) 中斷了promise 就不會執行這條了
            })
          }
        });
      };
 axios.js //添加響應攔截器
//讓請求成功的結果再也不是response,而是response.data的值
//在請求返回以後且在咱們指定的請求回調函數以前
axios.interceptors.response.use(function(res){
    return res.data //返回的結果就會交給咱們指定的請求響應的回調
},function(err){//統一處理全部請求的異常錯誤
    // return Promise.reject(error)
    alert('請求出錯'+ err.message)
    //返回一個pending狀態的promise,中斷promise鏈
    return new Promise(()=>{})
})

</script>

 api/index.js

<script>
import axios from './axios'

const BASE = ""

// export function reqLogin(param){
//     axios({
//         method:'post',
//         url:BASE+'/login',
//         data:param  
//     })
// }

//寫成箭頭函數的形式
// export const reqLogin = (param)=>{//不要寫{}  寫{}，=>就沒有return 的做用了  用（）包裹

// }

/*
這個方法能夠：
export const reqLogin = (param) => (
    axios({
        method: 'post',
        url: BASE + '/login',
        data: param
    })
)
*/

//這個也能夠
export const reqLogin = (param) => (axios.post(BASE + '/login', param))

</script>