Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

Posted haonanElva

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)相关的知识,希望对你有一定的参考价值。

1. 实现效果

以get方法向http://192.168.32.12:8080/users 发起请求、获取数据并进行处理

this.apiGet(/users, {})
  .then((res) => {
    console.log(res)
  }, (err) => {
    console.log(err)
  })

2. 实现步骤一之配置域名前缀

2.1 安装axios

cnpm install axios --save

2.2 配置webpack.base.conf.js 文件

引入

const webpack = require(webpack)

在项目根目录下的build 中可以找到webpack.base.conf.js 文件,对文件中的内容进行以下两项操作:

  在module.exports之前插入代码

// define the different HOST between development and production environment
var DEV_HOST = JSON.stringify(http://192.168.32.12:8080)
var PUB_HOST = JSON.stringify(http://{部署服务器ip和端口})

  在module.exports 中添加与entry、output、resolve等选项并列的plutins选项

plugins: [
  new webpack.DefinePlugin({
    HOST: process.env.NODE_ENV === production ? PUB_HOST : DEV_HOST
  })

2.3 配置main.js 文件

 

import axios from axios
axios.defaults.baseURL = HOST
window.axios = axios
window.HOST = HOST
 
const bus = new Vue()
window.bus = bus

3. 实现步骤二之封装axios

3.1 新建http.js 文件, static下边新建 js 文件夹

const apiMethods = {
    methods: {
        apiGet(url, data) {
            return new Promise((resolve, reject) => {
                axios.get(url, data).then((response) => {
                    resolve(response.data)
                }, (response) => {
                    reject(response)
                    console.log(response)
                    bus.$message({
                        message: 请求超时,请检查网络,
                        type: warning
                    })
                })
            })
        },
        apiPost(url, data) {
            return new Promise((resolve, reject) => {
                axios.post(url, data, {
                    headers: {
                        Content-Type: application/json
                    }
                }).then((response) => {
                    resolve(response.data)
                }).catch((response) => {
                    console.log(f, response)
                    resolve(response)
                    bus.$message({
                        message: 请求超时,请检查网络,
                        type: warning
                    })
                })
            })
        }
    }
}

export default apiMethods

3.2 文件引入

在需要发送ajax的请求文件中引入http.js

import http from ../../../../static/js/http.js

并在该文件的export default 末尾添加选项

mixins: [http]

3.3 方法调用

this.apiGet(/index.php/api/v1/goods/list, {
                    params: {
                        property_name: 秒杀
                    }
                })
                .then((res) => {
                    if(res.code == 0){
                        this.hotListDate = res.result;
                    }else{
                        this.$message.error(res.message);
                    }
                }, (err) => {
                    console.log(err)
                });

post

this.apiPost(/index.php/api/v1/user/login, {
                    mobile      : this.form.phone,
                    password    : this.form.password
                })
                .then((res) => {
                    if(res.code == 0){
                       
                    }else{
                        this.$message.error(res.message);
                    }
                }, (err) => {
                    console.log(err)
                });

 

以上是关于Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)的主要内容,如果未能解决你的问题,请参考以下文章

vue简单封装axios

vue中axios 配置请求拦截功能 及请求方式如何封装

vue-cli axios统一请求前缀设置

vue-cli axios统一请求前缀设置

vue-cli axios统一请求前缀设置

Vue-cli webpack 设置Axios发起请求统一前缀的路径(设置统一请求地址)(发起GET请求,发起POST请求,发起PUT请求,发起DELETE请求)