Vue.js 2.x 如何使用axios(组件中使用)

第一步 ： Vue.js 2.x 如何使用axios -在组件中使用

我个人推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用)

安装 axios

使用 npm

npm install axios

使用 yarn

yarn add axios

使用 axios

main.js

import axios from 'axios'
Vue.prototype.$http = axios
//执行 GET 请求
this.$http.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

详情请看axios官方文档

第二步：vue-cli3.x 配置代理，封装axios

配置代理

在项目根目录下新建vue.config.js

module.exports = {
    devServer: {
        host:"localhost",//要设置当前访问的ip 否则失效
        open: true, //浏览器自动打开页面
        proxy: {
            '/api': {
            target: '目标网址',
            ws: true,
            changeOrigin: true,
            pathRewrite:{
                '^/api':''
            }
        }
      }
    }
  }

这样配置就完成了。

封装axios

配合代理使用
首先，根目录创建一个config目录
config目录下新建axios.js和env.js

env.js

//根据不同的环境更改不同的baseUrl
let baseUrl = '';

if (process.env.NODE_ENV == 'development') {
    baseUrl = '/api';

} else if (process.env.NODE_ENV == 'production') {
    //baseUrl = '测试地址';
    //baseUrl = '预发布地址';
    baseUrl = '生产地址';
}

export {
    baseUrl,//导出baseUrl
}

axios.js

再次封装axios.js 进行全局使用

import {
  baseUrl, //引入baseUrl 
} from "../config/env";
import axios from 'axios';
axios.defaults.timeout = 10000; //设置请求时间
axios.defaults.baseURL = baseUrl;//设置默认接口地址
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
*/
export function fetch(url,params={}){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
    })
  }
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

main.js

//把如下代码加入main.js
import { post, fetch }  from "../config/axios";
Vue.prototype.$get=fetch;
Vue.prototype.$post=post;

请求事例

//因为设置了默认axios的接口地址，所以直接写后面的接口名字就行
this.$get("/posts").then((res)=>{
     console.log(res)
  })