vue axios封装调用

1、安装axios:npm install axios --save-dev

2、在和main.js同级的目录中新建一个js文件(httpRequest.js)

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 3000//设置请求响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'//配置请求头
axios.defaults.baseURL = 'https://xxxxxxx.com'//配置接口地址(如果接口地址多建议再新建一个存放地址的js文件)

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((res) => {
    //在发送请求之前做某件事
    if(res.method  === 'post'){
        res.data = qs.stringify(res.data)//使用qs序列化数据
    }
    return res;
},(error) =>{
    console.log('错误的传参')
    return Promise.reject(error)
})


//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((result) =>{
    //对响应数据做些事
    if(!result){
        return Promise.resolve(result);
    }
    return result;
}, (error) => {
    console.log('网络异常')
    return Promise.reject(error);
});


//返回一个Promise(发送post请求)
export function httpPostRequest(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
// 返回一个Promise(发送get请求)
export function httpGetRequest(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(res => {
                resolve(res)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

//最后导出
export default {
    httpPostRequest,
    httpGetRequest,
}

3、在main.js中引入刚刚的js文件,并挂载到全局中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { Button, Select, Message } from 'element-ui'


import httpRequest from './httpRequest.js'
Vue.prototype.httpRequest = httpRequest


Vue.use(ElementUI)
Vue.use(Button, Select, Message)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如果要设置代理(跨域),package.json 同级目录新建一个 vue.config.js

module.exports = {
    //axios域代理,解决axios跨域问题
    baseUrl: '/',
    devServer: {
        proxy: {
            '': {
                target: 'http://192.168.0.130:9103',
                changeOrigin: true,
                ws: true,
                pathRewrite: {

                }
            }
        }
    }
}

记得重新npm run serve一下项目

4、调用;
在对应的vue文件中:

getChargeList(){
        this.httpRequest.httpGetRequest('/admin/wxRecharge',{
          current: 1,
          size: 20
        }).then((res) => {
          if(res.data.code == 20000){
            console.log(res.data.data)
            this.recordsList = res.data.data.records
            this.$notify({
              title: 'success',
              message: '获取数据成功',
              type: 'success'
            })
          }
        })
      }

在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页