axios vue进阶开发 vue axios原理

前言：axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个方法。

axios介绍

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

首先需要知道：axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

浏览器支持 

axios面向现代浏览器设计，所以古老的浏览器并不支持。因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。

本文将通过具体实例介绍axios的基本使用方法与个性化配置（封装）。

直接开整！！！

1、新建一个Vue项目

2、安装axios

npm install axios

3、全局使用

//main.js
import axios from 'axios'
Vue.prototype.$axios = axios

4、基本使用案例

执行get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

// 上面的请求也可以这样做
axios.get('/user', {
  params: {
    ID: 12345
  }
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

执行post请求

axios.post('/user', {
  firstname: 'Fred',
  lastName: 'Flintstone'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

执行多个并发请求

function getUserAccount () {
  return axios.get('/user/12345');
}
function getUserPermissions () {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermission()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求都执行完成
  }));

以上为基本使用，现在通过实例中实践一下

假如现在有某个接口（API），我们需要通过get请求调用，然后将返回数据渲染在页面上

api：https://api.apiopen.top/getJoke

入参：page=1、count=2、type=video

根据上面的基本使用案例可知，可以使用两种方式，接下来一一验证

1、URL地址参数拼接

由上面的api和入参可得拼接后的URL为：https://api.apiopen.top/getJoke?page=1&count=2&type=video（api后?将参数拼接，多个参数用&连接）

<template>
  <div class="main">
    <p>我是A组件</p>
  </div>
</template>

<script>
export default {
  name:'A',
  data(){
    return {
      result:''
    }
  },
  mounted(){
    //通过get请求（URL地址参数拼接）去调后台接口，并打印响应信息
    this.$axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(res=>{   //这里使用箭头函数的形式
      console.log(res,"响应信息")
    })
  }
}
</script>

<style scoped>
.main {
  width: 500px;
  height: 250px;
  margin: auto;
  background: rgb(18, 199, 42);
}
</style>

刷新页面，打开F12，切换到Network，发现此时页面发送了请求

切换到Console，查看控制台打印信息

我们已经成功获取接口的响应信息（返回值） ，数据结构为json格式，此时我们可以将想要的数据渲染到页面上，展开查看json数据

如我们想要将红色部分的信息渲染在页面上，此时可以对响应信息稍作处理

<template>
  <div class="main">
    <p>我是A组件</p>
    <span>{{result}}</span>
  </div>
</template>

<script>
export default {
  name:'A',
  data(){
    return {
      result:''   //默认值为''，请求成功后为其赋值
    }
  },
  mounted(){
    this.$axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(res=>{
      //console.log(res,"响应信息")
      this.result = res.data.message         //改变data中的result值（默认为''）
    })
  }
}
</script>

<style scoped>
.main {
  width: 500px;
  height: 250px;
  margin: auto;
  padding: 10px;
  background: rgb(18, 199, 42);
}
</style>

页面显示效果

2、传入params对象形式

另外一种get请求的写法，使用params对象，将所传参数当成params对象的键值对传入。以下可达到相同效果

this.$axios.get('https://api.apiopen.top/getJoke',{
  params:{               //将URL地址拼接参数的形式换成传入params对象的形式
    page:1,
    count:2,
    type:'video'
  }
}).then(res=>{
  //console.log(res,"响应信息")
  this.result = res.data.message         //为data中的result赋值
})

这就是axios的基本使用，是不是很简单？

理解了get请求之后，post请求也就不难理解，除了请求方式（get变成了post）与请求参数的写法不同，其他写法基本一致。如下，如果此时为一个post请求，可以这么写

this.$axios.post('https://api.apiopen.top/getJoke',
  {              //请求体为一个对象
    page:1,
    count:2,
    type:'video'
  }
).then(res=>{
  //console.log(res,"响应信息")
  this.result = res.data.message         //为data中的result赋值
})

除了如上两种方式外还有其他的写法吗？那是当然，请继续往下看。

可以通过向axios传递相关配置来创建请求： 

如get请求我们可以这么写

this.$axios({
  method: 'get',
  url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
}).then(res=>{
  this.result = res.data.message
})

进而也可以这么写

this.$axios({
  method: 'get',
  url: 'https://api.apiopen.top/getJoke',
  params:{
    page:1,
    count:2,
    type:'video'
  }
}).then(res=>{
  this.result = res.data.message
})

与之前写法不同的是，我们直接把请求相关配置通过对象传入axios，如get请求此时用method:"get"表示，直接传入的url也使用url:"xxx"表示等等，这些成为一个对象的属性，该对象即为配置对象，形如axios(config)。

传递配置对象post请求案例

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {       //注意这里，get参数使用params，post参数使用data
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

那么我们在通过这种方式使用axios时，可传递的配置（配置对象的属性）都有哪些呢？请往下阅读请求配置。

请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的，如果没有指定 method，请求将默认使用 get方法。

{
    // url 是用于请求的服务器 URL
    url: '/user'

    // method 是创建请求时使用的方法
    method: 'get',    // default

    // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
    // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://some-domain.com/api/',

    // transformRequest 允许在向服务器发送前，修改请求数据
    // 只能用在 PUT、POST 和 PATCH 这几个请求方法
    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data, headers) {
        // 对 data 进行任意转换处理
        return data;
    }],

    // transformResponse 在传递给 then/catch 前，允许修改响应数据
    transformResponse: [function (data) {
        // 对 data 进行任意转换处理
        return data;
    }],

    // headers 是即将被发送的自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    
    // params 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象 (plain object) 或 URLSearchParams 对象
    params: {
        ID: 12345
    },

    // paramsSerializer 是一个负责 params 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function (params) {
        return QS.stringify(params, {arrayFormat: 'brackets'})
    },
    
    // data 是作为请求主体被发送的数据
    // 只适用于这些请求方法 PUT、POST 和 PATCH
    // 在没有设置 transformRequest 时，必须是以下类型之一：
    // - string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
    // - 浏览器专属：FormData，File，Blob
    // - Node专属：Stream
    data: {
        firstName: 'Fred'
    },

    // timeout 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求花费了超过 timeout 的时间，请求将被中断
    timeout: 1000,

    // withCredentials 表示跨域请求时是否需要使用凭证
    withCredentials: false,    // default
    
    // adapter 允许自定义处理请求，以使测试更轻松
    // 返回一个 promise 并应用一个有效的响应(查阅 [response docs](#response-api))
    adapter: function (config) {
        /* ... */
    },

    // auth 表示应该使用 HTTP 基础验证，并提供凭据
    // 这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization 头
    auth: {
        username: 'janedoe',
        password: 's00pers3cret'
    },

    // responseType 表示服务器响应的数据类型，可以是 arraybuffer、blob、document、json、text、stream
    responseType: 'json',    // default

    // responseEncoding 表示对响应的编码
    // Note：对于 responseType 为 stream 或 客户端请求会忽略
    responseEncoding: 'utf-8',

    // xsrfCookieName 是用作 xsrf token 值的 cookie 名称
    xsrfCookieName: 'XSRF-TOKEN',    // default

    // xsrfHeaderName 是 xsrf token 值的 http 头名称
    xsrfHeaderName: 'X-XSRF-TOKEN',    // default
        
    // onUploadProgress 允许为上传处理进度事件
    onUploadProgress: function (progressEvent) {
        // ... ...
    },
    
    // onDownloadProgress 允许为下载处理进度事件
    onDownloadProgress: function (progressEvent) {
        // ... ...
    },

    // maxContentLength 定义允许的响应内容的最大尺寸
    maxContentLength: 2000,
    
    // validateStatus 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise。
    // 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve，否则 promise 将被 reject
    validateStatus: function (status) {
        return status >= 200 && status < 300;    // default
    },

    // maxRedirects 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为 0，将不会 follow 任何重定向
    maxRedirects: 5,

    // socketPath 用于在 node.js 中定义 UNIX Socket
    // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
    // 只能指定 socketPath 或 proxy，如果两者同时指定，将使用 socketPath
    socketPath: null,

    // httpAgent 和 httpsAgent 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。
    // 允许像这样配置选项。keepAlive 默认没有启用
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),

    // proxy 定义代理服务器的主体名称和端口
    // auth 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    // 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过使用 header 设置的自定义 Proxy-Authorization 头
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
            username: 'mikeymike',
            password: 'rapunz31'
        }
    },

    // cancelToken 指定用于取消请求的 cancel token
    cancelToken: new CancelToken(function (cancel) {
        // ... ...
    })
}

正是由于选项配置的多样性，我们可以根据这个配置来个性化axios，或者说是封装axios（往下会展开）。

配置默认值

我们可以指定将被用在各个请求的配置默认值，说白了就是设置请求的一些默认值，使得每次使用axios时都会传入相同的配置。

全局的axios默认值

使用axios.defaults.xxx的方式，如

axios.defaults.baseURL = 'http://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

如像刚刚我们的那个请求一样，如果整个项目的请求地址域名或上下文根都一样，那么我们就可以使用配置默认baseURL，举个例子，如下图

整个项目请求的url的前缀部分都是一样的，那么我们可以这样设置

//main.js
import axios from 'axios'
axios.defaults.baseURL = 'https://api.apiopen.top'
Vue.prototype.$axios = axios

此时请求的url可以修改成如下所示

this.$axios({
  method: 'get',
  url: '/getJoke',    //此时会将baseURL与该url进行拼接成最终请求的url
  params:{
    page:1,
    count:2,
    type:'video'
  }
}).then(res=>{
  this.result = res.data.message
})

自定义实例默认值

我们可以通过axios.create方式创建一个实例，为该实例配置默认值（该种方式可用于封装自定义axios，往下会展开）

// 创建实例时设置配置默认值
const instance = axios.create({
    baseURL: 'https://api.example.com'
});

// 实例创建之后可修改默认配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

如上我们讲了几种传入配置的请求方式，那么他们之间的优先级如何？

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置默认值来创建实例
// 此时超时配置的默认值是 1000
const instance = axios.create({
  timeout:1000
});

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置，即该方式优先级最高
instance.get('/longRequest', {
    timeout: 5000
});

axios封装（个性化配置）

axios封装在项目中也很常用，每个不同的项目可能请求的方式、参数配置或者请求响应前后处理等都不一样，因此需要封装合适自己项目的axios，通俗来说就是个性化配置。

之前我们都是引入axios就直接使用了，相当于使用是通用（默认）配置，接下来我们对axios进行封装。

首先，将main.js中的这些代码移除

然后，在main.js同级目录下新建axios.js文件

先进行简单配置，然后导出自定义axios实例（此时为封装好的）

import axios from "axios";
//创建一个axios实例
const instance = axios.create();  //这里我们使用默认配置

/*当然可以在创建的同时进行默认配置，更多配置请上面列出参考配置项
 *如 const instance = axios.create({
 *     baseURL:'https://api.apiopen.top'  
 *     timeout:2000,
 *   });
*/

export default instance

在main.js中导入，然后全局使用

//main.js
import axios from './axios'
Vue.prototype.$axios = axios

此时可以正常使用封装好的axios

this.$axios({
  method: 'get',
  url: 'https://api.apiopen.top/getJoke', //我们在封装axios时未配置baseURL，因此需要写全url
  params:{
    page:1,
    count:2,
    type:'video'
  }
}).then(res=>{
  this.result = res.data.message
})

在创建axios实例时，除了进行配置项的配置，还可以使用拦截器的方式进行设置axios实例。

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们，可对请求或响应做统一处理。

用法形如：

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

我们来简单使用一下，对axios实例加上拦截器，在请求之前跟响应之前分别打印出相关信息：

import axios from "axios";
//创建一个axios实例
const instance = axios.create();
/*当然可以在创建的同时进行默认配置
 *如 const instance = axios.create({
 *     baseURL:'https://api.apiopen.top'  
 *     timeout:2000,
 *   });
*/

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    console.log('我要准备请求啦------')
    console.log(config,'请求配置')
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    console.log('我接收到响应数据啦------')
    console.log(response,'响应配置')
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
export default instance

我们在请求前打印出“我要准备请求啦------”和请求配置，在响应前打印“我接收到响应数据啦------”和响应信息，刷新页面，控制台打印如下：

展开请求配置信息，可以发现，里面红框部分就是我们配置的，其他是默认的：

有了拦截器，我们就可以对请求和响应做一些个性化配置，如请求失败、成功的提示或逻辑处理以及响应失败、成功的逻辑处理等都可以在拦截器定义，包括一些提示、打印等等，这也是项目中常用的axios封装方式。

如果你想在稍后移除拦截器，可以这样：

const myInterceptor = instance.interceptors.request.use(function () { /* ... */ });
instance.interceptors.request.eject(myInterceptor);

错误处理

请求错误除了可以在拦截器统一处理，还可以对某个具体请求使用catch进行捕捉，如下所示

axios.get('/user/12345')
    .catch(function (error) {
        if (error.response) {
            // 请求已发出，且服务器的响应状态码超出了 2xx 范围
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            // 请求已发出，但没有接收到任何响应
            // 在浏览器中，error.request 是 XMLHttpRequest 实例
            // 在 node.js 中，error.request 是 http.ClientRequest 实例
            console.log(error.request);
        } else {
            // 引发请求错误的错误信息
            console.log('Error', error.message);
        }
        console.log(error.config);
    });

也可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围：

axios.get('/user/12345', {
  validateStatus: function (status) {
    // 当且仅当 status 大于等于 500 时 Promise 才被 reject
    return status < 500;
  }
});

以上就是axios的一些基本介绍，更多详情可以参考axios文档。

axios中文网|axios API 中文文档 | axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

http://www.axios-js.com/