封裝axios方法之一

一、先來說說為什么要封裝axios異步請求。

我們前端開發中總是會遇到跨域的問題，我們會配置proxy來解決跨域的問題，無論是vue 還是react。

如何配置我這里就不說了。

然后...然后我們就會遇到一個打包上線的問題，上線時候我們必須把前綴拼接上，如果每個頁面都保存一個路徑變量會很麻煩，所以我們會封裝axios來統一管理路徑，這樣可以使我們頁面請求變得更加簡潔。

代碼如下

import axios from 'axios'
import qs from 'qs'

let http={
    post:"",
    get:""
}
// http://60.10.00.005:8080
//方法一 統一攔截

const Website="";
http.post= function (api,data){
    let params = qs.stringify(data)
    return new Promise((resolve,reject) => {
        axios.post(`${Website}`+api,params).then((res) =>{
            resolve(res)
        })
    })
}
http.get= function (api,data){
    let params = qs.stringify(data)
    return new Promise((resolve,reject) => {
        axios.post(`${Website}`+api,params).then((res) =>{
            resolve(res)
        })
    })
}
方法二單個請求定義
// export function _login(data){
//     let params = qs.stringify(data)
//     return axios.post('/hrjc/mobile/login',params)
// }
export default http

個人偏愛方法一，因為方法一讓我感覺代碼會比較干凈吧。方法二需要每個請求都寫一次，顯得代碼太冗余了。

方法一用法如下

 

import http from '../server';
 http.post("/login",{"loginName": userName,"password": password})
          .then(function(response){}
          .catch(function(err){
              console.log("失敗"+err);
            })

方法二同理使用，就是提出去一部分，

個人知識積累