axios ｜ 青训营笔记

---

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

axios框架的基本使用

axios的请求方式

支持多种请求方式:

axios(config)
axios.request(config)
axios.get(url[, config)
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]l)
axios.put(url[, data[, configll)
axios.patch(url[, data[, configl]l)

axios的基本使用

安装框架：npm install [email protected] --save

接口：httpbin.org

axios(config)返回Promise 内部会调用resolve()

在main里演示 ```js import axios from 'axios' // 为什么不用Vue.use? 框架不是插件 不需要使用Vue的use方法 // 因为axios是不依赖于vue的，vue里面也没有关于axios的方法，所以不要用vue.use()

// axios(config) 传入相应配置就可以使用 axios({ url : 'http://123.207.32.32:8000/home/multidata',

// 默认发送get请求 method : 'get' }).then(res => {
// 怎么拿数据 axios(config)可以返回Promise 内部拿到数据后会调用resolve console.log(res) }) // get请求的路径参数，除了直接加到url里，还可以写在params里 axios({ // url : 'http://123.207.32.32:8000/home/data?type=sell&page=1',

url : 'http://123.207.32.32:8000/home/data', params : { // 专门针对get请求的参数拼接 type : 'pop', page : 1 } }).then(res => {
console.log(res) }) ```

同源，即(当前网页的url和ajax请求的目标资源的url之间)协议、域名、端口号必须完全相同，而ajax是默认遵从同源策略， 而违背同源策略就是跨域 后端加注解 @CrossOrigin

axios发送并发请求 axios.all

两个请求都拿到数据后再做处理。 使用axios.all, 可以放入多个请求的数组.

axios.all([])返回的结果是一个数组， 使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

js // 对传入的多个网络请求进行合并 // all方法用于需要合并处理多个异步事件的返回数据 axios.all([axios({ url : 'http://123.207.32.32:8000/home/multidata' }), axios({ url : 'http://123.207.32.32:8000/home/data', params : { type : 'pop', page : 1 } }) ]).then(axios.spread((res1, res2) => { console.log(res1) }))

全局配置

在开发中可能很多参数都是固定的，例如上面的BaseURL是固定的 这个时候我们可以进行一些抽取, 也可以利用axios的全局配置axios.defaults ```js // 公共配置写到全局里 axios.defaults.baseURL = 'http://123.207.32.32:8000' axios.defaults.timeout = 5000 // 毫秒

axios.all([axios({ // baseURL = 'http://123.207.32.32:8000', url : '/home/multidata' }), axios({ url : '/home/data', params : {
type : 'pop', page : 1 } }) ]).then(axios.spread((res1, res2) => { console.log(res1) })) ```

常见的配置选项

请求类型-------->method: 'get',

request body---->data: { key: 'aa'},

用到的时候自己具体查配置信息

axios的实例

服务器知识：分布式

项目变大，服务器在部署的时候，并发量非常高，一个服务器不能承载-满足业务需求，需要多个服务器，ip地址不同，使用nginx部署反向代理服务器，前端只需要向这一个代理服务器发送请求，他会自己处理。

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例. 当给该实例设置一些默认配置时, 这些配置就被固定下来了. 但是后续开发中, 某些配置可能会不太一样. 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等. 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

代码实现

需求：有多个请求时，如果请求的url不同，设置一个全局的baseURL就不合适 此时会单独创建一个实例 ```js // instance:实例 // axios.create(config) 返回一个实例 // 每个实例有自己独立的配置 const instance1 = axios.create({ baseURL : 'https://www.blogry.cn', timeout : 5000 })

instance1({ url : '/test/index' }).then( res => { console.log(res); }) ```

axios封装

为什么要封装？ 如果直接在项目代码中使用框架，之后框架不维护或者出现重大漏洞时，需要对代码进行修改，工程量会很大 所以直接将框架封装起来，到时候只用修改封装代码

新建文件夹network，存放网络请求封装 request参数提供一个success回调函数，request封装内使用，在封装内的异步处理中可以通过success进行成功回调

封装代码 推荐promise方法

```js import axios from 'axios'

// 用 Promise包裹
export function request(config) { // return new Promise((resolve, reject) => { // // 创建axios实例 // const instance = axios.create({ // baseURL : 'https://www.blogry.cn', // timeout : 1000 // })

// // 发送真正的网络请求 // instance(config) // .then( res => { // resolve(res) // }).catch( err => { // seject(err) // }) // })

// 因为axios(config)返回Promise 内部会调用resolve() // 传递一个config到模块中进行网络请求,返回一个带有结果的primise const instance = axios.create({ baseURL : 'https://www.blogry.cn', timeout : 1000 }) return instance(config) } ```

使用封装

```js import {request} from './network/request'

request({ url : '/test/index' }).then( res => { console.log(res); }).catch( err => { console.log(err); }) ```

拦截器概念

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

用于拦截 请求的过程, 并不是字面意义上的拦截，真正的意思是插入操作， ”请求“一半是应用层发起的行为，而如果你的项目开发后，想要在请求后统一加工干点什么，就需要用拦截器，否则应用层每一处调用的地方都要修改

使用拦截器

请求，响应拦截

axios.interceptors.request.use(拦截成功函数，拦截失败函数) axios.interceptors.response.use(拦截成功函数，拦截失败函数)

代码实现

```js // 请求拦截 instance.interceptors.request.use(config => { // console.log(config); console.log('request拦截成功'); return config }, err => { console.log(err); console.log('request拦截失败'); return err }) // 拦截之后必须要返回配置config，否则内部拿不到config，发送请求失败 // 在这里也可以单独对config进行处理，拦截器一般用于对数据的处理 // 拦截器的作用之一：统一给所有的请求加token // 典型应用就是携带token保持登录状态，发给后台

// 响应拦截 instance.interceptors.response.use(res => { console.log('response拦截成功'); return res.data // 一般只需要返回数据的data， res里其他的东西是axios添加的 }, err => { console.log(err); console.log('response拦截失败'); return err }) ```

拦截器做什么

请求拦截的作用

1. config中的一些信息不符合服务器的要求，比如要添加一些请求头
2. 每次发送网络请求时，希望在界面中显示一个请求中的动画 加载中
3. 某些网络请求(比如登录(token))，必须携带一些特殊的信息

请求拦截中错误拦截较少，通常都是配置相关的拦截 可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

响应拦截的作用

响应的成功拦截中，主要是对数据进行过滤。

响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。