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>

        </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. 封装 apisrc/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/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-06-01 19:33:28

results matching ""

    No results matching ""