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)
    )