【vue】axios网络请求模块

1、axios特点

• 支持在浏览器、nodeJS中发送http请求；
• 支持promise API；
• 支持拦截请求和响应；
• 转换请求和响应数据；

2、安装使用
通过get请求与params{}连用、post与data{}连用传递参数，axios返回的是promise函数，获取的响应数据可以直接通过.then(res=>{})获取；

npm install --save axios
import axios from 'axios'

get请求：参数形式支持params、qurey，下方以query参数为例：

//方式一
axios({ 
	url:'...',
	method:'get',
	params:{type:'安安',page:1}//真正传输时,会浏览器自身会对参数中文进行兼容性转码：type=%....&page=1
}).then((res)=>{})
//方式二
axios({
	url:'http://...:8080/home/data?type=pop&page=1'
}).then()
//方式三
axios.get('http://...:8080/home',{params:{},[config]})
.then().catch(err=>{})

post请求：参数形式支持params、query、请求体，常用请求体；

请求体有两种传输形式：json(参数是对象时默认用)、urlencoded编码(又叫 form 格式、x-www-form-urlencoded 格式)；
json（对象参数默认这个）：{“name”:“aa”,“age”:18}
urlencoded形式：就是键值对形式，形如key=value&key=value，query参数形式就是这样；

//方式一
axios({ 
	url:'...',
	method:'post',
	data:{name:'小小',age:1}//对象默认json格式传输
	data:'name=小小&age=1' //字符串默认urlencoded形式传输，1变为字符串1
}).then((res)=>{})
//方式二
axios.post('http://...:8080/home',{name:'小小'，age:1},[config])
.then().catch(err=>{})

3、axios的并发请求

//按顺序将返回数据以数组形式存在results中
axios.all([axios({}),axios({})]).then(results=>{})
//拆分响应数据
axios.all([axios({}),axios({})])
.then(axios.spread((res1,res2)=>{}))

4、axios的全局配置

• 全局的 axios 默认值,优先级最低

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 自定义实例默认值

const instance = axios.create({
  baseURL: 'https://api.example.com'
});
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

• 请求时的config参数，优先级最高

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
// 覆写库的超时默认值，现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

5、axios的实例
背景：直接使用axios({})是全局请求，做全局配置后，在针对不同url、或不同配置需求时就不方便了；

• 解决一：服务器端使用Nginx配置反向（服务器>浏览器）代理服务器，将前端用到的所有不同地址服务器代理到Nginx，向前端抛出一个服务器地址；
• 解决二：创建axios实例，针对不同的请求路径或配置创建不同的实例；

const instance1 = axios.create({
	baseURL:'https://...:8000',
	timeout:5000
})//实例1，并做自身的公共配置
instance1({
	url:'/home/data',
	params:{}
}).then(res=>{}).catch(err=>{})

6、axios的封装

为了避免更换第三方框架时，去每个组件中都要去改；封装到一个公共js文件中，再导入到组件中使用；这样axios框架不用时就只需要改这个公共的js文件；