09-axios在Vue中的导入与配置

前言

我们接着上一篇文章 08-路由地址的数据获取 来讲。


下一篇文章 10-vuex在Vue中的导入与配置

首先简单了解什么是Axios？

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

关于axios的特点，可以查看axios中文文档，还可以了解一下axios, ajax和fetch的详细比较内容。

接下来开始安装axios，在项目目录下执行npm i axios（不同的node版本，成功后的提示不同）

安装成功后进行引入，在项目目录下src文件夹里创建新的utils文件夹，然后，在文件夹里创建axios.js

/utils/axios.js

/axios/index.js

/utils/request.js

// 1、引入axios内容
import axios from 'axios'// 2、设置请求默认内容
// 请求服务器地址
axios.defaults.baseURL = 'https://www.xxxx.com:8080'
// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.withCredentials = true
// 请求头中X-Requested-With字段值为XMLHttpRequest
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 请求头中携带token值
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 使用post请求时，发送的数据类型（Content-Type）为 application/json
axios.defaults.headers.post['Content-Type'] = 'application/json'// axios使用拦截器，我们下面会讲一下拦截器的定义
axios.interceptors.response.use(res => {// 服务器返回值非正常情况下执行的代码if (typeof res.data !== 'object') {alert('服务器异常！')return Promise.reject(res)}if (res.data.resultCode != 200) { // 浏览器状态码不为200（正常）if (res.data.message) alert(res.data.message)  //判断是否有错误信息，有则打印错误信息if (res.data.resultCode == 416) { // 浏览器状态码为416（未登录）alert('未登录，请先登录！')}return Promise.reject(res.data)}// 服务器返回值正常情况下执行的代码return res.data
})
// 导出axios 实例
export default axios

// 1、引入axios内容
import axios from 'axios'// 2、设置请求默认内容
// 请求服务器地址
axios.defaults.baseURL = 'https://www.xxxx.com:8080'
// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.withCredentials = true
// 请求头中X-Requested-With字段值为XMLHttpRequest
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 请求头中携带token值
//axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 使用post请求时，发送的数据类型（Content-Type）为 application/json
axios.defaults.headers.post['Content-Type'] = 'application/json'axios.interceptors.request.use(config => {config.headers['token'] = localStorage.getItem('token') || '';return config
})// axios使用拦截器，我们下面会讲一下拦截器的定义
axios.interceptors.response.use(res => {// 服务器返回值非正常情况下执行的代码// if (typeof res.data !== 'object') {//   alert('服务器异常！')//   return Promise.reject(res)// }// if (res.data.resultCode != 200) { // 浏览器状态码不为200（正常）//   if (res.data.message) alert(res.data.message)  //判断是否有错误信息，有则打印错误信息//   if (res.data.resultCode == 416) { // 浏览器状态码为416（未登录）//     alert('未登录，请先登录！')//   }//   return Promise.reject(res.data)// }// 服务器返回值正常情况下执行的代码return res.data
})
// 导出axios 实例
export default axios

关于拦截器

​ 如果我们使用中需要统一处理所有 http 请求和响应, 就需要使用 axios 拦截器。

使用拦截器的原因：

​ 若出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。
​ 页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，
​ 如果每个请求都附带后端返回的token，我们需要在拿到response之前loading动画的展示等。

拦截器的分类：

​ 拦截器分为 请求（request）拦截器和 响应（response）拦截器。

以上完成后就可以使用了

接下来以get请求为例，使用方式如下：

this.axios.get(url).then(res => {//请求成功，触发then中的函数console.log(res)  }).catch(error =>//请求失败，触发catch中的函数 可省略console.log(error))

某商城的API接口：http://backend-api-01.newbee.ltd/api/v1/index-infos

<template><div id="app"><ul><li v-for="(good, index) in list" :key="index">{{ good }}</li></ul></div>
</template><script>import axios from "./utils/axios";
export default {data() {return {list: [],};},mounted(){axios.get("http://backend-api-01.newbee.ltd/api/v1/index-infos").then(res => {console.log(res);this.list = res.data.hotGoodses})}
};
</script>

请求结果自行判断

关于post请求方式与get类似，不同点在于地址url和参数params分开传递，使用方式如下：

axios.post(url, params).then(res => {//请求成功，触发then中的函数console.log(res)  }).catch(error =>//请求失败，触发catch中的函数 可省略console.log(error))