Skip to content

Latest commit

 

History

History
273 lines (212 loc) · 7.42 KB

Axios.md

File metadata and controls

273 lines (212 loc) · 7.42 KB
Raw

Axios

Create by jsliang on 2018-11-8 13:41:10
Recently revised in 2019-05-31 13:50:06

饮水思源：Axios 中文文档

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

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

一 目录

目录
一 目录
二 正文
 2.1 get
 2.1 post

二 正文

返回目录

axios 实战经验

2.1 get

返回目录

方法：axios.get(url, options)

话不多说，先上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue学习</title>
</head>

<body>
  <div id="app"></div>

  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
  <!-- 1. 引用 axios -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
  
  <script>

    new Vue({
      el: document.getElementById('app'),
      template: `
        <div>
          <button @click="sendAjax">发送请求</button>
          <span>数据为：</span>
          {{ getData }}
        </div>
      `,
      data() {
        return {
          getData: ''
        }
      },
      methods: {
        sendAjax() {
          // 直接使用 axios
          // get 为请求方式
          axios.get('https://www.easy-mock.com/mock/5be3885e033152564881d354/getInfo')
          // then 为 promise 获取数据
          .then((res) => {
            this.getData = res.data;
          })
          // catch 为 promise 捕获异常
          .catch();
        }
      }
    })

  </script>
</body>

</html>

如上，我们使用 axios 非常简单，只需要引用它的 cdn，然后通过：

axios.get()
.then()
.catch()

就可以直接调用 axios 获取数据。

2.2 post

返回目录

post 请求讲解

三 杂记

3.1 跨域代理

步骤 1. 设置 index.js：

dev: {
  proxyTable: {
   '/stat': {
     target: 'http://172.**.**.**:8080/', // 接口的域名
     changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
   }
 },
},

步骤 2. 设置 main.js 全局拦截器：

// 设置 axios
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use( (config) => {
  config.headers.common['timestamp'] = "******";
  config.headers.common['deviceid'] = "******";
  config.headers.common['signature'] = "******";
  // 在发送请求之前做些什么
  return config;
}, (error) => {
  // 在请求错误时做些什么
  return Promise.reject(error);
})

步骤 3. 调用 PartOne.vue：

axios({
  url: "stat/getApersonnelDistribution",
  method: "get",
  params: {
    rank: 4
  },
}).then( (res) => {
  console.log(res);
})

3.2 单个页面多 API 调用

步骤 1. 全代码为：

create() {
  this._getApi();
},
methods: {
 _getApi() {
   axios(xxx).then( res=> {
     console.log(res);
     this._drawxxx(res);
   })
 },
 _drawxxx(res) {

 }
}

步骤 2. 理解：

首先，在 create() 中调用方法体。

然后，在 methods() 中编写方法体，方法体调用 axios。

最后，在方法体中通过 axios 获取到数据之后，将数据传入到方法中进行处理。

步骤 3. 缘故：这样分布处理，有利于代码逻辑优化，当某步出现错误的时候，方便调试。同时使用 _ 开头命名方法，防止与其他 api 冲突。

3.3 Axios 封装

步骤 1. 封装 api 到 src/api/api.js 中

api.js

/**
 * 封装逻辑
 * 1. 引入 axios。
 * 2. 设置请求配置 request。如：请求超时，响应头等
 * 3. 设置请求中的遮罩（未实现）
 * 4. 设置请求成功后的数据过滤（未实现）
 * 5. 设置并暴露接口，传 data、method、url 到请求配置 request 上。
 */

// 设置 axios
import axios from 'axios';

// 请求配置
const request = axios.create({
  // 本地开发 dev 的时候，不需要开启这个
  // baseURL: 'http://172.****.****.5:8080',
  timeout: 5000,
  headers: {
    timestamp: "20181026094424",
    deviceid: "10102",
    signature: "F9CB03DD3ED50EDA5DB214C42D4DC0D6",
  }
})

/**
 * 获取用户名
 * userId
 */
export const getUserName = data => request({
  method: 'get',
  url: '/api/getUserName',
  params: data
})

步骤 2. 在 Pages 中调用：

UserInfo.vue

// 引用接口
import { getUserName } from "@/api/api"

export default {
  methods: {
    _getUserName() {

      // 获取用户名
      getUserName({
        userId: this.userId,
      }).then( (res) => {
        console.log("\n【API - 获取用户名】：");
      })
    }
  }
}

jsliang 广告推送：
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看！

图 图

知识共享许可协议
jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。