09-axios
前言
我们接着上一篇文章 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)
)