axios 请求拦截封装使用

1. 引入axios

import axios from 'axios'

2. 引入接口 api

import API from './api'

接口 api 格式如下

1 {
2   "userInfo": {
3        "query": "xxx/xxx/userInfo/query",  
4        "update": "xxx/xxx/userInfo/update",  
5    },
6     "xxx": {
7         "xxx": "xxx/xxx/xxx/xxx"
8    }
9 }

3. 配置本地测试和线上的请求域名

　　a. node 环境可以用 process.env.NODE_ENV 来判断是不是在本地环境，

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

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

1 const devOrigin = 'http://test.yuming.com' // 本地开发接口地址
3 // 正式环境动态获取域名
4 const Host = process.env.NODE_ENV === 'development' ? devOrigin : window.location.origin

4. 配置全局参数

1 axios.defaults.headers['Content-Type'] = 'application/json'   // 全局请求头
2 axios.defaults.headers['publicParams'] = '******' // 如果要设置公参也可以放在请求头里
3 axios.defaults.baseURL = Host // 配置请求域名第3步拿到的域名
4 axios.defaults.timeout = 10000 // 配置超时时间

5. 设置全局的请求拦截和响应拦截

 1 // 请求拦截
 2 axios.interceptors.request.use(function (config) { 
 3    // 请求已经到了服务器那边
 4    // config 是请求时携带的一些信息可以打印下看看具体的 
 5 }, function (error) {
 6    // 请求出现了错误，一般可能时客户端网络出现问题 
 7 })
 8 
 9 // 响应拦截
10 axios.interceptors.response.use(function (res) { 
11    // 接口返回200这里需要 return 返回的信息，不然请求的时候拿不到服务器返回的信息
12 }, function (error) {
13    // 响应非200，或者超过了设定的请求时间而超时了
14 })

6. 向外部暴露请求方法

　　a. post 请求如下

 1 export const httpPost = (url, params) => {
 2   const [key1, key2] = url.split('/')
 3   let urls
 4   if (API[key1]) {
 5     urls = API[key1][key2]
 6   } else {
 7     urls = url
 8   }
 9   let data = {
10         xxx: 'xxx' // 这里可以添加公共参数，比如appid什么的
11         ...params
12       }    
13   }
14   return axios({
15     url: urls,
16     method: 'post',
17     data: data
18   })
19 }

b. get 请求如下，这里也可以像post 请求一样使用将请求参数放在第二个参数里,参数格式用json 格式，就是这里配置请求url 的时候需要把json 拼接成 search 格式的参数

 1 export const httpGet = (url) => {
 2   const [urlKeys, params] = url.split('?')
 3   const [key1, key2] = urlKeys.split('/')
 4   let urls
 5   if (API[key1]) {
 6     urls = API[key1][key2]
 7   } else {
 8     urls = urlKeys
 9   }
10   axios({
11     url: `${urls}?${params}`,
12     method: 'get'
13   })
14 }

7. 页面发起请求

a. 支持 es6

1 async function getUserInfo () { // 可以使用 try catch 拿到请求出错信息
2    let res = await httpGet('userInfo/query?userId=123')  // get 请求
3    let res2 = await httpPost('userInfo/update', { // post 请求
4       name: 'haha'
5    }) 
6 }

b. promise 写法

1 httpPost('userInfo/update', {
2   name: 'haha'
3 }).then(result => {
4   // result   响应拦截返回的信息
5 }).catch(error => {
6    // 请求出错
7 })

以上

axios 请求拦截封装使用

猜你喜欢