axios--axios框架

2020年09月10日 21:38 · 阅读 3914

网络模块的选择

选择一，原生ajax。配置和调用非常的混乱。在开发中很少选择，而是使用jquery封装的ajax.
选择二,jquery封装的ajax.在开发vue项目的时候很少选择。因为我们开发vue项目是完全不依赖jquery的。所以为了使用jquery封装的ajax.去引入jquery得不偿失。
选择三，axios框架。也就是我们最终的选择。他有很多的优点比如支持Promise，支持拦截请求和响应。

使用axios框架

安装axios框架

npm install axios --save
复制代码

导入axios框架

import axios from "axios"
复制代码

axios进行网络请求的简单使用

可以直接就使用axios。

axios(config) config就是配置，也就是网络请求的一些配置。
axios.get(url,[config])使用这种方式第一个参数是url
axios.post(url,[data,[config]]) ...
其实他们可能形式上有点差距，本质上其实是差不多的。

axios(config)

axios(config)默认的请求方式是一个get请求，当然可以通过config配置它的method属性，可以指定它是以什么方式进行请求的。

axios({
  url:"http://123.207.32.32:8000/home/multidata"
})
复制代码

这就是一个最基本的请求了。（默认是get方式。）
在ajax中，请求成功之后，会调用success中的函数处理请求来的数据。那在我们axios中是怎么处理的呢？
axios()本身会返回一个Promise对象，当请求成功的时候，会默认调用resolve()函数，从而你可以把请求成功处理data 的代码放到then方法中执行。同理请求失败的时候，会默认调用reject函数传入错误信息。然后默认调用catch方法

axios({
  url:"http://123.207.32.32:8000/home/multidata"
}).then(res=>console.log(res)).catch(err=>console.log(err))
复制代码

就像我这种形式就是最基本的使用。我们来打印一下res看看. 是这个对象。其实本质上服务器就给了data属性的东西，也就是说obj.data才是服务器传过来的数据。是axios框架自己自作多情给传入的数据包装了这么多其他的属性。

axios的get请求传递参数

当我进行get请求的时候怎么传递参数呢？

方式一，直接在url中拼接数据。我们get请求的参数可以直接拼接到url后面。比如：

axios({
  url:"http://123.207.32.32:8000/home/multidata?aaa=1&type=2"
}).then(res=>console.log(res))
复制代码

直接在url上拼接数据即可。

方式二，config中配置params属性

axios({
  url:"http://123.207.32.32:8000/home/multidata",
  params:{
  aaa:1,
  type:2
  }
}).then(res=>console.log(res)).catch(err=>console.log(err))
复制代码

axios发送并发请求

就是有的业务需要两个网络请求都成功才进行下一步操作。这时候，我们可以使用axios发送就是通过：

axios.all([]);//传入一个数组，数组元素都是一个axios网络请求
复制代码

axios.all([
  axios({
    url:"http://123.207.32.32:8000/home/data"
  }),
  axios({
    url:"http://123.207.32.32:8000/home/multidata"
  })
]).then(res=>console.log(res))
复制代码

然后统一在then方法中进行处理，注意这时候then方法中的res是一个数组他应该是两个请求请求来的数据组成的数组。

axios 配置相关

config的基础内容

config中可以配置哪些东西呢？

baseURL baseURL就是url的公共部分我们把它们取出来，这就是baseURL。他会和我们的url进行拼接。比如上面两个url,我们可以把http://123.207.32.32:8000赋值给baseURL,那我们的url就没那么长了

axios({
	baseURL:"http://123.207.32.32:8000",
    url:"/home/data"
  })
复制代码

url 请求路径
method 请求的类型
params get请求传参
timeout 超时设置
data post请求传参

config的默认值

我们可以发现其实很多请求很多配置项都是相同的。那么我们可以设置配置项的默认值

设置方式

axios.defaults.baseURL[=""
复制代码

这样的形式。

注意点

这里我们是直接使用的axios。也就是一个全局的axios。实际上axios可以创造很多实例，上面的默认值只是针对使用全局的axios进行网络请求的配置。

axios的实例

为什么要创造axios的实例

因为如果都使用全局的axios，那么你只有一套默认配置，可能很多请求的baseURL是A，很多请求的baseURL是B。那么一套默认配置就很麻烦。那么这时候我们就可以创建多个实例。就很多套的默认配置。

怎么创建axios的实例

let instance1 = axios.create({
baseURL:"",
timeout:5000
})
复制代码

create方法传入的对象就是这个实例的默认配置。

axios的封装

为什么要封装axios

如果我们很多组件都要进行网络请求，我们需要在他们的.vue文件中导入axios框架。

import axios from "axios"
复制代码

这样会导致一个很严重的问题，我们的项目对这个第三方框架依赖太强了。就是万一这个框架出bug了或者不更新了，我们要更换框架，就很麻烦。所以最好就是我们自己封装第三方框架，在项目中用自己封装的来进行网络请求。这样，即使更换第三方框架我们只需要在做封装的js代码中处理就好了。

简单封装axios

新建一个.js文件 request.js:

import axios from "axios"
export function instance1 (config,success,failure){
  let instance = axios.create({});
  instance(config).then(res=>success(res)).catch(err=>failure(err))
}
复制代码

在要进行网络请求的组件中：通过封装我们只需要导出我封装的这个函数即可。并且这个函数有三个参数

第一个参数，对象，是网络请求的相关配置。
第二个参数，函数，网络请求成功时处理数据的操作
第三个参数，函数，网络请求失败时相应的操作

其实还有一种方案：
在request.js中：

import axios from "axios"
// export function instance1 (config,success,failure){
//   let instance = axios.create({});
//   instance(config).then(res=>success(res)).catch(err=>failure(err))
// }
export function instance1 (config){
  let instance = axios.create({});
  return  instance(config);
}

复制代码

在使用网络请求的组件中: 什么意思呢？基本思想就是我们不需要成功后的操作和失败后要做的操作传入，而是我直接把这个网络请求返回出去。之前我说过网络请求内部其实会返回一个Promise对象，那我直接把这个网络请求return出去，你处理数据和处理数据的操作就在组件中写就好了，别给我传进来了。

axios拦截器

之前说过，axios是可以进行拦截请求和响应的。他提供了对应的方法：

拦截请求

拦截方法：

axios/(axios.instance).interceptors.request.use(config=>{return config},err=>{})
复制代码

拦截请求成功，就会执行config=>{}，其实拦截的就是请求的配置（刚刚我们不是给请求配置了很多东西嘛），赋值给config.
config:
拦截请求失败，就会执行err=>{}，其实一般不存在请求都发送失败的情况哈哈哈，所以这个基本不会触发。

注意点

你把人家的配置拦截了，一定要return 还回去，不然别人就没配置了！！！所以一定要return config.

拦截响应

axios/(axios.instance).interceptors.response.use(res=>{return res;},err=>{})
复制代码

拦截响应成功，就会执行res=>{}，其实拦截的就是请求过来的数据（当然它被axios包装了），赋值给res.
拦截响应失败，就会执行err=>{}

注意点

响应拦截成功一定也要返回数据，不然页面本来要渲染的数据被你截胡了页面就渲染不出来了。