观看更佳:传送门
为什么选择axios?
🔷 功能特点:
🔹在浏览器中发送 XMLHttpRequests 请求
🔹在 node.js 中发送 http请求
🔹支持 Promise API
🔹拦截请求和响应
🔹转换请求和响应数据
axios 的请求方式
🔷 支持多种请求方式:
🔹 axios(config)
🔹 axios.request(config)
🔹 axios.get(url[, config])
🔹 axios.delete(url[, config])
🔹 axios.head(url[, config])
🔹 axios.post(url[, data[, config]])
🔹 axios.put(url[, data[, config]])
🔹 axios.patch(url[, data[, config]])
axios 发送基本请求
这里我们使用了axios(config) 的请求方式。
config是一个对象,它默认是采用 GET 请求的,当然如果想要使用POST请求,可以添加 method:“POST”
axios 它返回的是一个Promise对象,可以直接在后面使用then catch等方法。
使用 axios.get(url[, config]) 发送请求演示。
发送并发请求
有时候, 我们可能需求同时发送两个请求
使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
使用axios.all()
使用格式: axios.all([axios(config),axios(config)])
使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
使用格式: axios.all([axios(config),axios(config)]).then(axios.spread())
全局配置
🔷在上面的示例中, 我们的BaseURL是固定的
🔹 事实上, 在开发中可能很多参数都是固定的。
🔹 这个时候我们可以进行一些抽取, 将一些公共的配置抽取出来,也可以利用axiox的全局配置。
axios.defaults
常用的配置选项
🔷请求类型
🔹 method: ‘get’,
🔷URL查询对象
🔹 params:{ id: 12 },
🔷请求类型
🔹 method: ‘post’,
🔷request body
🔹 data: { key: ‘aa’},
我们需要注意的是,如果请求类型的get,则后面添加的请求参数应该使用的是 params{ } 。如果请求类型的post,则后面添加的请求参数应该使用的是 data{ } 。
🔷请求地址
🔹 url: ‘/user’,
🔷请根路径
🔹 baseURL: ‘http://www.mt.com/api’,
🔷超时设置s
🔹 timeout: 1000,
🔷请求前的数据处理
🔹 transformRequest:[function(data){}],
🔷请求后的数据处理
🔹 transformResponse: [function(data){}],
🔷自定义的请求头
🔹 headers:{‘x-Requested-With’:‘XMLHttpRequest’},
🔷查询对象序列化函数
🔹 paramsSerializer: function(params){ }
🔷跨域是否带Token
🔹 withCredentials: false,
🔷自定义请求处理
🔹 adapter: function(resolve, reject, config){},
🔷身份验证信息
🔹 auth: { uname: ‘’, pwd: ‘12’},
🔷响应的数据格式 json / blob /document /arraybuffer / text / stream
🔹 responseType: ‘json’,
axios 实例
🔷 为什么要创建axios的实例呢?
🔹 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
🔹 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
🔹 但是后续开发中, 某些配置可能会不太一样.
🔹 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
🔹 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
所以当我们的业务比较多的时候,请求接口比较多,我们使用上面的全局配置就不行了。这个时候我们就要使用axios实例了。
网络请求模块的封装
我们为什么要axios进行封装?
如果我们使用的 axios 有一天不进行了维护,或者出现重大的bug ,我们需要换其他的第三方网络请求框架。那么我们需要在每一个组件中都需要修改,很是不好。所以我们对网络请求模块进行封装,即使有一个我们需要改换其他的第三方网络请求框架,就只对我们的网络请求模块进去修改即可。
创建一个network文件夹。这里面放对网络封装相关的文件。
创建request.js
封装一:
使用回调函数。
request.js
import axios from 'axios'
export function request(config, success, failure) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求
instance(config)
.then(res => {
success(res)
})
.catch(rej => {
failure(rej)
})
}
使用模块:
import { request } from "./newwork/request"
request({
url: 'home/multidata'
}, function(res) {
console.log(res);
})
request({
url: "api/z8/home/data",
params: { type: 'pop', page: 1 }
}, function(res) {
console.log(res);
})
封装二:
使用回调函数。
request.js
import axios from 'axios'
export function request(config) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求
instance(config.baseConfig)
.then(res => {
config.success(res)
})
.catch(rej => {
fonfig.failure(rej)
})
}
使用模块:
import axios from 'axios'
request({
baseConfig: {
url: '/home/multidata'
},
success(res) {
console.log(res);
},
failure(rej) {
console.log(rej);
}
})
封装三:
使用Promise。
request.js
import axios from 'axios'
export function request(config) {
return new Promise((resolve, reject) => {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求
instance(config)
.then(res => {
resolve(res)
})
.catch(rej => {
reject(rej)
})
})
}
使用模块:
import { request } from "./newwork/request"
request({
url: 'home/multidata'
}).then(res => {
console.log(res);
}).catch(rej => {
console.log(rej);
})
封装四:(最终方案)
使用Promise。
request.js
import axios from 'axios'
export function request(config) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求
// axios 实例本身返回是一个Promise对象
return instance(config)
}
使用模块:
import { request } from "./newwork/request"
request({
url: 'home/multidata'
}).then(res => {
console.log(res);
}).catch(rej => {
console.log(rej);
})
axios 拦截器的使用
axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
axios 请求拦截器
🔷 为什么要拦截请求呐。
🔹 我们对请求的config进行一些修改。
🔹 比如config中的一些信息不符合服务器的要求。
🔹 比如每次发送网络请求的时候,都希望在界面中显示一个请求的图标。
🔹 比如某些网络请求(比如 登陆(携带token)),必须携带一些特殊的信息。
instance.interceptors.request.use(参数一,参数二)
传入两个参数,拦截请求成功函数,和拦截请求失败函数。
注意:我们拦截之后,对请求做完一系列修改,我们要返回请求,不然后面我们请求不到数据。
🔷 请求拦截可以做到的事情:
🔹 请求拦截中错误拦截较少,通常都是配置相关的拦截。
🔹 可能的拦截的错误:比如请求超时,可以将页面跳转到一个错误页面中。
axios 响应拦截器
instance.interceptors.response.use()
响应拦截也是两个参数。拦截响应成功函数,和拦截响应失败函数。
同样我们拦截到响应之后,要返回响应,通常返回return response.data
即可,因为我们只要数据。
🔷 响应拦截中完成的事情:
🔹 响应的成功拦截中,主要是对数据进行过滤。
🔹 响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。
request.js
import axios from 'axios'
export function request(config) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://11.11.11.11:8000',
timeout: 5000
})
// 2.请求拦截
instance.interceptors.request.use(config => {
return config
}, err => {
console.log(err);
return err
})
// 响应拦截
instance.interceptors.response.use(response => {
return response.data
}, err => {
return err
})
// 3、发送网络请求请求
// axios 实例返回是一个Promise对象
return instance(config)
}