第五章 axios专题

一、axios 介绍安装

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

安装:

npm install axios

地址:

http://axios-js.com/zh-cn/docs/#axios-API

二、axios 调用方式

在大型项目中，很多页面可能调用相同的接口,后期接口发生改变，很多界面都需要修改，维护成本较高

参考axios.js模块，我们发现，get post 等最后都会到 axios的原型链上的 request方法中，因此我们采用接口调用:

三、axios 使用

拦截器调用

在工具文件夹(utils)中建立request.js 文件:

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";//获取本地token
// 创建axios
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 接口地址
  timeout: 5000, // 响应超时
});
// 请求拦截
service.interceptors.request.use(
  (config) => {
    // 这里处理一些事件:比如:token
    // if (store.getters.token) { 
    //   config.headers["X-Token"] = getToken();
    // }
    return config;
  },

  (error) => {
    // 这里一些处理
    console.log(error); // 
    return Promise.reject(error);
  }
); 
// 响应拦截
service.interceptors.response.use( 
  (response) => {    
    const res = response.data; 
    if (res.code !== 20000) {
      Message({
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm(
          "You have been logged out, you can cancel to stay on this page, or log in again",
          "Confirm logout",
          {
            confirmButtonText: "Re-Login",
            cancelButtonText: "Cancel",
            type: "warning",
          }
        ).then(() => {
          store.dispatch("user/resetToken").then(() => {
            location.reload();
          });
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err" + error);
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);
export default service;

api书写

在项目中新建文件夹api,在其中按照模块书写api:

import request from "@utils/request";
/**
 * 获取验证码
 * @param {*} data
 */
export function getSms(data) {
  return request({
    method: "post",
    url: "/getSms/",
    data
  });
}

页面中使用

 

import {getSms} from "@/api/login";

 

四、axios 跨域配置、环境变量

1.环境变量

地址:https://cli.vuejs.org/zh/guide/mode-and-env.html

在项目中增加两个文件:

通过process.env.[变量名] 获取值

在拦截器request.js 中使用的 接口地址就可以写在环境变量中:

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 接口地址
  timeout: 5000 // 响应超时
});

运行程序调用接口后,地址变为我们配置的地址:

2.axios 跨域配置

 

图中可以看到 本地localhost去请求时会遇到跨域问题，因此我们要在vue.config.js 中去配置代理

修改环境变量中的值:

VUE_APP_BASE_API = "/dev_api" 

运行程序,接口正常: