axios--axios框架

4,667 阅读6分钟

网络模块的选择

  • 选择一,原生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=>{}

注意点

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