02-axios封装的意义

一、axios是什么

axios 是一个轻量的 HTTP客户端

基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端

特性

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

二、使用

安装

// 项目中安装
npm install axios --s
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入

import axios from 'axios'

发送请求

axios({
	url:'https://',
	method:"GET",// 请求方式
	params:{
		type:'',
		page:1
	}
}).then((res)=>{
	console.log(res);// res为后端返回的数据
})

并发请求 axios.all([])

function getUserAccount(){
	return axios.get('/user/12345');
}
function getUserPermissions(){
	return axios.get('/user/12345/permiss');
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(res1,res2){
	// res1第一个请求的返回的内容，res2第二个请求返回的内容
	// 两个请求都执行完成才会执行
}));

二、为什么要封装

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用
但是，随着项目规模增大，如果每发起一次HTTP请求，就要把这些设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

重复性工作，冗余不堪，难以维护。

例如：

axios('url',{
	method:'GET',
	timeout:1000,
	withCredentials:true,
	headers:{
		'Content-Type':'application/json',
		Authorization:'',	
	},
	transformRequest:[function(data,headers){
		return data;	
	}],
	
})
.then((data)=>{
	console.log(data);
},(err)=>{
	if(err.response.status === 401){
			
	}
	if(err.response.status === 403){
			
	}
})

每个组件都发送类似的请求，显得过于繁琐了

于是，把重复的提取出来，放到一个文件中，更为合理

三、如何封装

请求头、状态码、请求超时时间、请求前缀、请求方法、请求拦截器、响应拦截器

设置接口请求前缀

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

if(process.env.NODE_ENV === 'development'){
	axios.defaults.baseURL = ''
}else if(process.env.NODE_ENV === 'production'){
	axios.defaults.baseURL = ''
}

本地开发时，在 vue.config.js文件中配置 devServer实现代理转发，实现跨域

devServer:{
	proxy:{
		'/api':{
			target:'url',
			changeOrigin:true,
			pathRewrite:{
				'/api':''
			}	
		}	
	}
}

设置请求头与超时时间

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

const service = axios.create({
	timeout:30000,
	headers:{
		get:{
			'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
		},
		post:{
			'Content-Type':'application/json;charset=utf-8'
			//	在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
		}	
	}
})

封装请求方法

// 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)
	})
	})
}

把方法放在一个js文件中

import {httpGet,httpPost} from ''
export const getorglist = (params = {})=>{
	return httpGet({url:'',params})
}

页面中直接调用

import {getorglist } from '@/assets/js/api'
getorglist({id:200}).then(res=>{
	console.log(res)
})

这样 统一管理 API ，维护修改对应的js文件即可

请求拦截器

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

起来也方便

// 请求拦截器
axios.interceptors.request.use(
	config=>{
		token && (config.headers.Authorization = token)
		return config	
	},
	error =>{
		return Promise.error(error)	
	}
)

响应拦截器

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

axios.interceptors.response.use(response=>{
	if(response.status === 200){
		return response.data
	},error=>{
		return Promise.reject(error.response)	
	}
})

这样看来，对公共代码的抽取可以减少重复代码的编写，同时也提高了开发效率，后期接口改变，也可以快速修改。