axios:axios(理解为ajax i/o system比较好)
默认为get请求,且get对应params,post对应data
axios({
url: 'http://httpbin.org/get',
params: {
page: 1
}
}).then((data) => {
console.log(data);
});
axios.get('http://httpbin.org/post',
{params: { page: 1 }})
.then((data) => {
console.log(data);
});
axios.all([
axios({
url: 'http://httpbin.org/get'
}),
axios({
url: 'http://httpbin.org/get',
method: 'get',
params: {
page: 2
}
})
]).then(results => {
console.log(results);
});
axios.all([
axios({
url: 'http://httpbin.org/get'
}),
axios({
url: '/get',
method: 'get',
baseURL: 'http://httpbin.org'
timeout: 10
params: {
page: 2
}
})
]).then(axios.spread((res1, ...res2) => {
console.log(res1);
console.log(res2);
}));
我们可以利用axios的default来对我们的一些固定配置经行抽取
axios.defaults.baseURL = 'http://httpbin.org';
axios.defaults.timeout = 5000;
axios({
url: '/get',
method: 'get',
params: {
page: 2
}
}).then((data) => {
console.log(data);
});
url: '/user' /*请求地址*/
method: 'get' /*请求类型*/
baseURL: 'http://www.mt.com/api' /*请求根路径*/
transformRequest: [function(data) { }] /*请求前数据的处理*/
transformResponse: [function(data) { }] /*请求后数据的处理*/
headers: { 'x-Requested-With':'XMLHttpRequest' } /*自定义的请求头*/
params: { id: 12 } /*URL传递的参数get*/
paramsSerializer: function(params) { } /*查询对象序列化函数*/
data: { key: '毛毛' } /*请求体post*/
timeout: 1000 /*超时设置,毫秒*/
withCredentials: false /*跨域是否带Token*/
adapter: function(resolve, reject, config) { } /*自定义请求处理*/
auth: { uname: '涂涂', pwd: '12' } /*身份验证信息*/
responseType: 'json' /*响应式数据格式:json/blob/document/arraybuffer/text/stream*/
所谓全局指共用一套配置,局部使用多个配置(个人理解)
上面的axios都是全局实例化的axios,而全局实例化的axios是不利用正常开发的,比如:当需要从多个服务器里面获得数据的时候,就意味着需要有多个ip地址,而多个ip地址意味着多个主机,而全局axios的baseURL只能是一个ip地址,就无法满足要求
axios的局部实例化(局部),局部的axios里面的 固定配置可以针对性的配置,且利于后期维护,推荐使用
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
});
instance({
url: 'post',
method: 'post'
}).then(res => {
console.log(res);
});
instance({
url: 'get',
method: 'get'
}).then(res => {
console.log(res);
});
src ——network ——request.js
为什么要进行axios封装呢?
因为如果不进行封装而直接使用别人的框架,假如有一天框架不再维护了或者需要更换别的框架,维护代码就很困难(需要在多个使用了该框架的地方进行修改内容),而对axios进行简单的封装就可以只在一个地方更改相应的框架,以此来解决这个问题
/*第一种*/
import axios from 'axios'
export function request(config) {
return new Promise((resolve, reject) => { /*直接return个promise*/
const instance = axios.create({ /*实例化axios*/
baseURL: 'http://httpbin.org',
timeout: 5000
});
instance(config) /*使用axios*/
.then(res => {
resolve(res); /*成功时调用resolve函数并传递参数*/
})
.catch(err => {
reject(err); /*失败时调用reject函数并传递参数*/
});
})
}
/*第二种*/
import axios from 'axios'
export function request(config) {
const instance = axios.create({ /*实例化axios*/
baseURL: 'http://httpbin.org',
timeout: 5000
});
return instance(config) /*直接返回实例对象instance的结果,因为实例对象返回的结果是一个promise*/
}
/*封装函数的使用*/
import { request } from './components/request'
request({
url: 'post',
method: 'post'
}).then(res => {
console.log(res);
})
拦截器用于我们在每次发送请求(请求成功或失败)或者在响应的时候(响应成功或失败)对业务逻辑进行相应的处理,所以拦截器是针对4种情况的
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
});
instance.interceptors.request.use( /*请求成功或失败*/
config => { /*请求成功的时候执行config函数*/
return config; /*这里必须要return config,因为它本身在我们没有拦截的时候return了config,
而现在我们拦截了request也需要return config,且这里的config(形参)是实例对象发送请求的信息(一些请求头信息)*/
},
err => {
console.log(err); /*请求失败的时候执行err函数*/
}
);
instance.interceptors.response.use( /*响应成功或失败*/
res => { /*响应成功的时候执行res函数*/
return res; /*这里必须要return res(当然也可以返回res.data,因为我们只需要使用数据),因为它本身在我们没有拦截的时候return了res,
而现在我们拦截了response也需要return res,且这里的res(形参)是实例对象得到响应时的一些信息(一些响应头信息)*/
},
err => {
console.log(err); /*响应失败的时候执行err函数*/
}
);
return instance(config)
}
本文只用于个人学习与记录