这是我参与「第五届青训营 」伴学笔记创作活动的第 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 axios@0.18.0 --save

接口：httpbin.org

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

在main里演示

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

// 对传入的多个网络请求进行合并
// 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

// 公共配置写到全局里
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就不合适 此时会单独创建一个实例

// 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方法

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)
}

使用封装

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(拦截成功函数，拦截失败函数)

代码实现

// 请求拦截
  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判断报错的错误码，跳转到不同的错误提示页面。