持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天
axios
安装：
npm install axios --save
引入：
import axios from 'axios'
使用：
//axios方法返回一个promise对象
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'post'//指定请求方式，默认为get
}).then(res => {
console.log(res);
})
//指定请求方式还可以这么写👇
axios.post({})
//传参，会自动拼接为->http://123.207.32.32:8000/home/data?type=pop&page=1
axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
//发送并发请求，返回的res就是一个包含所有请求对象的对象数组
axios.all([axios(), axios()]).then(res => {
//dosth
})
//使用spread将数组展开，这样就不用再通过下标获取返回的对象
axios.all([axios(), axios()]).then(axios.spread((res1, res2) => {
//dosth
}))
配置：
//对路径进行抽取
axios.defaults.baseURL = '123.207.32.32:8000'//基础域名
axios.defaults.timeout = 5000//响应时限(ms)
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//
常见的配置选项：
- url
- method:' '//请求类型
- baseURL //请求根路径
- transformRequest: [function(data){}] //请求前的数据处理
- transformResponse:[function(data){}] //请求后的数据处理
- headers:{'x`Requested-With':'XMLHttpRequest'}//自定义的请求头
- params:{} //URL查询对象
- paramsSerilizer: function(params){} //查询对象序列化函数
- data: {key: '111'} //request body
- timeout: 1000//超时设置(ms)
- withCredentials: false //跨域是否带Token
- adapter: function(resolve, reject, config){}//自定义请求处理
- auth: {uname:'',pwd:''} //身份验证信息
- responseType: 'json' //响应的数据格式
axios实例
在上面示例中，我们用到的是全局axios，但在实际开发中，我们要请求的baseURL以及其他配置并不一定一致，所以我们需要创建axios的实例使用
const instance1 = axios.create({
baseURL: 'http://balabalabala',
timeout: 5000
})
//使用实例发送请求
instance1({
url:'/foo',
params: {
bar: 'bar'
}
}).then(res => {
//dosth
})
模块封装
为了减少我们项目对axios框架的依赖，以便在框架停止维护时能更方便地更换框架，我们将axios封装至我们自定义地模块，在每个需要请求的组件中调用我们的自定义模块
//封装至network/request.js
import Axios from "axios";
export function request(config) {
//创建axios实例
const instance = Axios.create({
baseURL: 'http://balablabalaba.com',
timeout: 5000
})
//发送网络请求
return instance(config);//instance返回的就是一个Promise实例
}
//使用模块
import { request } from './network/request'
request('/home').
then((res)=>console.log(res)).
catch(err => console.log(err))
拦截器
//在模块中
import Axios from "axios";
export function request(config) {
//创建axios实例
const instance = Axios.create({
baseURL: 'http://balablabalaba.com',
timeout: 5000
})
//拦截器，参数两个函数，一个为成功，一个为失败，成功则返回拦截的配置信息(config)，失败则返回错误信息
//请求拦截
instance.interceptors.request.use(config => {
console.log(config);
return config
}, err => {
console.log(err);
})
//响应拦截
instance.interceptors.response.use(res => {
console.log(res);
//res中只有data部分是我们请求的数据
return res.data;
}, err => {
console.log(err);
})
//发送网络请求
return instance(config);//instance返回的就是一个Promise实例
}
拦截的应用场景举例：
- 判断config信息是否符合服务器要求
- 发送网络请求时，希望在界面中显示一个请求的图标
- 某些网络请求（比如登录(token)），必须携带一些特殊的信息
- 等等
个人认为：但前端数据用户可做改动，所以后端验证还是必不可少，前端验证只是减轻后端压力
