vue中使用axios最详细教程

不念不忘少年蓝@ 2021-10-13 03:55 259阅读 0赞

**前提条件：vue-cli 项目**

**安装：**

npm  
npm  
**在main.js导入：**

// 引入axios，并加到原型链中
    import axios from 'axios';
    Vue.prototype.$axios = axios;
    import QS from 'qs'
    Vue.prototype.qs = QS;

**封装好的axios,拿走不送：（最好是在main.js同级目录创建一个 https.js 文件，复制粘贴下面代码，改 接口地址 就可以用）**

import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.timeout = 5000;                        //响应时间
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
    axios.defaults.baseURL = '';   //配置接口地址
    
    //POST传参序列化(添加请求拦截器)
    axios.interceptors.request.use((config) => {
        //在发送请求之前做某件事
        if(config.method  === 'post'){
            config.data = qs.stringify(config.data);
        }
        return config;
    },(error) =>{
        console.log('错误的传参')
        return Promise.reject(error);
    });
    
    //返回状态判断(添加响应拦截器)
    axios.interceptors.response.use((res) =>{
        //对响应数据做些事
        if(!res.data.success){
            return Promise.resolve(res);
        }
        return res;
    }, (error) => {
        console.log('网络异常')
        return Promise.reject(error);
    });
    
    //返回一个Promise(发送post请求)
    export function fetchPost(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(response => {
                    resolve(response);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }
    返回一个Promise(发送get请求)
    export function fetchGet(url, param) {
        return new Promise((resolve, reject) => {
            axios.get(url, {params: param})
                .then(response => {
                    resolve(response)
                }, err => {
                    reject(err)
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }
    export default {
        fetchPost,
        fetchGet,
    }

**开发环境一般要跨域，解决跨域问题（设置代理）：vue-cli 3.0的在 package.json 同级目录新建一个 vue.config.js 文件，加入下面代码，其他版本找到配置文件的devServer加入代码**：

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

**修改完后记得重启项目应用配置  
然后就到收获的时候了，在要请求的vue模块中导入并使用：**

import https from '../https.js' 　　// 注意用自己的路径
    
    // 请求后台数据==================
                loginPost: function () {
                    let params ={'username': 'admin', 'password': 'admin123', 'rememberMe': 'true','isMobile':'1'}
                    https.fetchPost('/login',params ).then((data) => {
                        this.base.token = data.data.token　　　　
                        // console.log("this.base.tokenthis.base.token",this.base.token)
                        this.indexPost2(this.rres)
                    }).catch(err=>{
                            console.log(err)
                        }
                    )
                },
                indexPost2:function (date) {
                    var this_ = this
                    this_.check = false
                    var jobj ={data:{'menuDate': date,'token':this.base.token}}
                    let string  = JSON.stringify(jobj)
                    let params = {dailyInfo:string}
                    https.fetchPost('/meals/mobile/getDailyMenuByDate', params)
                    .then((data) => {
                        this_.base.indexData = data
                        this_.check = true
                        // console.log('thenthenthenthen',data)
                    })
                    .catch((err)=>{
                        console.log(err)
    
                    })
                },
                // ================================================
            },

文字不是很多，但重要的都在这，看代码的注释就行了