axios 請求攔截封裝使用

1. 引入axios 

import axios from 'axios'

2. 引入接口 api 

import API from './api'

接口 api 格式如下

{
  "userInfo": {
       "query": "xxx/xxx/userInfo/query",  
       "update": "xxx/xxx/userInfo/update",  
   },
    "xxx": {
        "xxx": "xxx/xxx/xxx/xxx"
   }
}

3. 配置本地測試和線上的請求域名

　　a. node 環境可以用  process.env.NODE_ENV 來判斷是不是在本地環境，

　　b. 不是node 環境就用你的本地域名判斷吧， 127.0.0.1 localhost 什么的

　　c. 有配置代理跨域的 devOrigin 配上你的代理名

const devOrigin = 'http://test.yuming.com' // 本地開發接口地址
// 正式環境動態獲取域名
const Host = process.env.NODE_ENV === 'development' ? devOrigin : window.location.origin

4. 配置全局參數

axios.defaults.headers['Content-Type'] = 'application/json'   // 全局請求頭
axios.defaults.headers['publicParams'] = '******' // 如果要設置公參也可以放在請求頭里
axios.defaults.baseURL = Host // 配置請求域名第3步拿到的域名
axios.defaults.timeout = 10000 // 配置超時時間

5. 設置全局的請求攔截和響應攔截

// 請求攔截
axios.interceptors.request.use(function (config) { 
   // 請求已經到了服務器那邊
   // config 是請求時攜帶的一些信息可以打印下看看具體的 
}, function (error) {
   // 請求出現了錯誤，一般可能時客戶端網絡出現問題 
})

// 響應攔截
axios.interceptors.response.use(function (res) { 
   // 接口返回200這里需要 return 返回的信息，不然請求的時候拿不到服務器返回的信息
}, function (error) {
   // 響應非200，或者超過了設定的請求時間而超時了
})

 6. 向外部暴露請求方法

　　a. post 請求如下

export const httpPost = (url, params, config = {}) => {
  const [key1, key2] = url.split('/')
  let urls
  if (API[key1]) {
    urls = API[key1][key2]
  } else {
    urls = url
  }
  let data = {
        xxx: 'xxx' // 這里可以添加公共參數，比如appid什么的
        ...params
      }    
  }
  return axios({
    url: urls,
    method: 'post',
    data: data,
    ...config  
  })
}

     b. get 請求如下， 這里也可以像post 請求一樣使用將請求參數放在第二個參數里,參數格式用json 格式，就是這里配置請求url 的時候需要把json 拼接成 search 格式的參數

export const httpGet = (url, params = {}, config = {}) => {
  const [key1, key2] = url.split('/')
  let urls
  if (API[key1]) {
    urls = API[key1][key2]
  } else {
    urls = urlKeys
  }
  axios({
    url: urls,
    params: {
       ...params
    }  
    method: 'get',
    ...config
  })
}

 

7. 頁面發起請求

a. 支持 es6

async function getUserInfo () { // 可以使用 try catch 拿到請求出錯信息
   let res = await httpGet('userInfo/query', {userId: 123})  // get 請求
   let res2 = await httpPost('userInfo/update', { // post 請求
      name: 'haha'
   }) 
}

b. promise 寫法

httpPost('userInfo/update', {
  name: 'haha'
}).then(result => {
  // result   響應攔截返回的信息
}).catch(error => {
   // 請求出錯
})

 

以上