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

骑猪看日落 2024-04-18 07:58 50阅读 0赞

# 第一步 ： 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官方文档][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)
      })

[axios]: https://link.jianshu.com/?t=https://github.com/mzabriskie/axios