1.前言

特点:

2. vue里面 基础使用axios

3.基础使用

组件使用

 const api = "/api/v1/code";
           this.axios.post(api,{test:"测试"}).then((res)=>{
               console.log("验证码--",res)
               this.codeUrl = res.data.code
           })

vue.config.js配置代理

 devServer: {
    // port:8080,
    // host:"yzs.com",
    open: true,
    proxy:{
      "/api":{
        target:"https://xx.xx.org",
        ws:false,
        changeOrigin:true,
        pathRewrite:{
          "^/api":""
        }
      }
    }
  }

4. baseUrl配置

全局配置-方式1

let config = {
  baseURL: "https://www.yzs.xx.",
  timeout: 60 * 1000, // Timeout
  withCredentials: true, // Check cross-site Access-Control
};

全局配置-方式2

/ /axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5. 某些情况下,有些个别请求也需要单独配置

局部配置

  this.axios.defaults.baseURL = "http://www.yzs.com"
            const api = "/api/v1/code";
           this.axios.post(api,{test:"测试"}).then((res)=>{
               console.log("验证码--",res)
               this.codeUrl = res.data.code
           })

7. 不同环境不同baseURL

if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

8. 基于element-ui的 loading配置

import { Loading } from 'element-ui';
const _axios = axios.create(config);
var loading = null
_axios.interceptors.request.use(
  function(config) {
    loading= Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {

    loading.close()
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

9. api拆分

this.$http.post(this.$hosts.yzsm.YZS_HOST + '/companyRight/getAllCompanyByMap', params)

步骤

注释必不可少

//获取权限列表
export const getAllRights = (params)=>{
        return axios.get("/api/companyRight/getAllCompanyByMap", {params})
}
// 更新权限
export const updateRight = ()=>{
    return axios.get("/api/companyRight/updateCompanyRight")
}
// 更新管理员权限
export const updateAdmin = ()=>{
    return axios.get("/api/companyRight/updateCompanyAdmin")
}

10. api使用

1. 引入

import * as api from "@/api/rights.js";

import {updateAdmin ,updateRight ,getAllRights }  from "@/api/rights.js";

2. 使用

methods: {
    getRightsBtn() {
      var params = {
      };
        api.getAllRights (params).then((res) => {
            if(res.data.bean  !== "2000"){
                return  this.$message.error(res.data.returnMessage)
            }
           this.listData = res.data.bean.list
            console.log("Res:",res)
        })
        .catch((err) => {
          console.log("失败", err);
        });
    },
  },

11. 请求拦截

why为啥要拦截呢

_axios.interceptors.request.use(
  config => {        
//在发送请求之前做些什么

        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;   
  },
  function(error) {
//  对请求错误做些什么
    // Do something with request error
    return Promise.reject(error);
  }
);

12. token 简要

13. token 取消

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();

14. 扩展 -响应拦截-配置

_axios.interceptors.response.use(
  response => {   
// 对响应数据做点什么

        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), 
  },
 // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error => {            
// 对响应错误做点什么

        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉