Vue实践 axios 发送http请求 以及 全局代理

• 参考文档

http://www.axios-js.com/

1、通过npm安装，也可以通过其他例子，参考文档

使用npm进行依赖的安装：

npm install axios

建立使用：安装到生产环境使用：npm install axios -S

-S 就是安装到生产环境中

1.1 一些附加依赖

qs: 请求结果转换对象

• npm安装qs

npm install qs

建立使用：安装到生产环境使用：npm install qs -S

简单案例demo

GET request，只是用于参考，与本文demo无关

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

POST request，只是用于参考，与本文demo无关

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

但是在正常的使用过程中，以上的方式是不足以方便我们使用的。

2、配置全局请求文件

• api
• config.js (请求全局拦截以及常用的请求方法封装，比如 GET、POST等)
• index.js (真实的请求路径)

下面我们来看一下这两个文件的内容

2.1 创建api/config.js

创建api文件夹，创建文件 config.js

用于放置通用的方法，例如Post、Get这些

import QS from 'qs';
import axios from 'axios';

/** 开发环境服务器地址,该位置可用于放置应用上下文 */
const DEV_SERVER = '/';

/** 部署服务器地址，该位置可用于放置应用的上下文 */
const DEPLOY_SERVER = '/';

/** 通过process.env.NODE_ENV来判断当前是哪个环境 */
export const SERVER = process.env.NODE_ENV === 'development' ? DEV_SERVER : DEPLOY_SERVER;

// axios请求拦截器配置
axios.interceptors.request.use((config) => {

    const configTemp = { ...config };

    //需要token验证
    //configTemp.headers.Authorization = `Bearer ${localStorage.getItem('access_token')}`;
    configTemp.headers['Cache-Control'] = 'no-cache';
    configTemp.headers.Pragma = 'no-cache';
    
    return configTemp;

}, (error) => Promise.reject(error));

// axios响应拦截器
axios.interceptors.response.use((res) => res, (error) => {

    Promise.reject(error);

});

// 设置同源cookie
axios.defaults.withCredentials = false;
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
axios.defaults.retry = 0;

// 超时时间设置
axios.defaults.timeout = 20000;

// 设置登录Authorization
const instancejson = axios.create({
    withCredentials: false,
    headers: {
        'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

// axios请求拦截器配置
instancejson.interceptors.request.use((config) => {

    const configTemp = { ...config };

    configTemp.headers['Cache-Control'] = 'no-cache';
    configTemp.headers.Pragma = 'no-cache';

    return configTemp;

}, (error) => Promise.reject(error));

instancejson.interceptors.response.use((res) => res, (error) => {

    Promise.reject(error);


});

/**
 * 封装POST请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
export const POSTFORM = (url, params) => instancejson.post(`${SERVER}${url}`,
    QS.stringify(params));

    /**
 * 封装POST请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
export const PUT = (url, params) => axios.put(`${SERVER}${url}`,
params);

/**
 * 封装POST请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
export const POST = (url, params) => axios.post(`${SERVER}${url}`,
    params);

/**
 * 封装DELETE请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
export const DELETE = (url, params) => axios.delete(`${SERVER}${url}`,
    params);

/**
 * 封装GET请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
export const GET = (url, params = {}) => axios.get(`${SERVER}${url}`,
    {
        params
    });

    /**
 * 封装下载请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */

export const DOWNLOAD = (url) => axios.post(`${SERVER}${url}`,
    {
        responseType: 'blob'
    }
);

/**
 * 封装上传请求
 * @param {String} url 请求路径
 * @param {Object} params 请求参数
 */
 export const UPLOAD = (url, params) => axios.post(`${SERVER}${url}`,
 params,
 {
     headers: {
         'Content-Type': 'multipart/form-data'
     }
 });

2.2 创建 api/index.js

创建api文件夹，创建文件 index.js

用于放置定制的方法，比如具体的接口

/* 引入config的请求方法 */
import { GET } from './config';

/** 请求接口，比如 http://127.0.0.1:9001/tolink/link-to-addr/tree/0 */
const getLinkTree = (params) => GET(`tolink/link-to-addr/tree/${params.id}`);


export default {
    getLinkTree
};

3、注意事项（开发环境，前后端项目出现跨域的情况）

由于前端项目的端口是8080，我请求后端的端口是9001，故出现跨域的问题。我采用下面的方式进行解决

可以在 vue 项目的 vue.config.js 配置文件中开启代理

开发环境才需要该配置

module.exports = {
    chainWebpack: (config) => {
        config.plugin("html").tap((args)=>{
            args[0].title="开发链接跳转...";
            return args;
          })
    },
    devServer: {
        proxy: {
            '/': {
                
                target: 'http://192.168.1.105:9001/', //后端的地址
                changeOrigin: true
            }
        }
    }
}

4、在项目中具体使用 api/index.js 文件

在项目中使用 比如 Home.vue

步骤
引入 import api from ‘@/api’;
使用 api.getLinkTree({id: 0}).then(res => {
得到返回值 this.treeData = res.data.data;

<template>
    <el-main>
    <div v-for="item in treeData" :key="item.id">
        {{item.id}}-{{item.name}}
    </div>
    </el-main>
</template>

<script>

import api from '@/api';

export default {

    data() {
      return {
        treeData:[]
      }
    },
    mounted() {
      api.getLinkTree({id: 0}).then(res => {
        if (res && res.status === 200) {
          this.treeData = res.data.data;
        }
      })
    }

}
</script>
<style scoped>
</style>

因为，使用history模式需要后端配合，为了简单，需要修改为hash

注意：
route/index.js 修改为

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

5、获取返回结果