axios封装

今天研究下怎么把axios抽离到一个单独文件里面，后期修改请求方法时，一次在单独文件里面全部可以修改。

---

一、axios是什么？

🧀是一个轻量的HTTP 客户端
基于XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持Promise,支持浏览器和Node.js端。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON 数据
• 客户端支持防御XSRF

二、使用步骤

安装

// 项目中安装
npm install axios --S
1
2

导入

import axios from 'axios'
1

发送请求

axios({
  url:'http://',
  method:'GET',
  params:{
	type:'',
	page:1	
  }
}).then(res=>{
	// res为后端返回的数据
	console.log(res)
})
1
2
3
4
5
6
7
8
9
10
11

并发请求 axios.all([])

function getUserAccount(){
	return axios.get('/')
}
function getUserPermissions(){
	return axios.get('/')
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(result1,result2){
 // res1第一个请求的返回的内容，res2第二个请求返回的内容
 // 两个请求都执行完成才会执行
}))
1
2
3
4
5
6
7
8
9
10

原因

🍕🍕🍕随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用

怎么抽离

前置需要协商好
一些约定，请求头，状态码，请求超时时间
请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

设置接口请求前缀

🍔🍔🍔 利用node环境变量来作判断，用来区分开发、测试、生产环境

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://'
}
1
2
3
4
5

🍟🍟🍟 在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域

devServer:{
 proxy:{
 	'/api':{
 		target:'',
 		changeOrigin:true
 		}
 	}
}
1
2
3
4
5
6
7
8

设置请求头与超时时间

🌭🌭🌭 大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。
🧀🧀🧀 当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

封装请求方法

🍕🍕🍕 先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去

// get请求
export function httpGet({
  url,params = {}  
}){
	return new Promise((resolve,reject)=>{
	 axios.get(url,{params}).then((res)=>{resolve(res.data)}).catch(err=>{reject(err)})
	 })
}
// post
export function httpPost({url,data={},params={}}){
  return new Promise((resolve,reject)=>{
   axios({
    url,method:'post',
    data,
    params
    })
   }).then(res=>{
    resolve(res.data)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

把封装的方法放在一个api.js文件中

import {httpGet,httpPost } from './http'
export const getorglist = (params={})=>httpGet({url:'/',params})
1
2

页面中就能直接调用

// .vue
import { getorglist  } from 'api'
getorglist({id:200}).then(res=>{console.log(res)})
1
2
3

这样可以把api统一管理起来，以后维护修改只需要在api.js文件操作即可

请求拦截器

请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便

// 请求拦截器
axios.interceptors.request.use(config=>{
 token && (config.headers.Authorization = token)
 return config
},error=>{
   return Promise.error(error)
 }
)
1
2
3
4
5
6
7
8

响应拦截器

响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权

// 响应拦截
axios.interceptors.response.use(response=>{
 if(response.status === 200){
   if(response.data.code === 511){
     // 未授权调取授权接口
    }else if(response.data.code === 510){
      // 未登录跳转登录页
     }else{
    return Promise.resolve(response)
   }
  }else{
    return Promise.reject(response)
   }
},error=>{
  if(error.response.status){
  // 对异常作统一处理
    return Promise.reject(error.response)
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19