vue中使用axios

1、安装axios

npm install axios

2、封装axios

在/src/utils目录下（没有的新建）新建api.js文件，在api.js中对axios请求进行封装

import axios from 'axios'
//导入路由
import router from '../router'

//处理响应信息的响应拦截器

/*上面已经导入了axios的对象了，这个对象里面有个响应的拦截器axios.interceptors.response.use(),use里面的data是服务端响应给你的数据，
该拦截器有两个回调函数，一个是success，一个是error,和jQuery里面的ajax一样请求数据的时候也有两个回调函数，一个success，一个error,
可以简单的理解为http的响应码是200的，它会进入到success方法中来，400以上的会进入到error来
*/
axios.interceptors.response.use(success => {
    //success.status: http的响应码   
    //success.data.status == 500: 返回json的status
    if(success.status && success.status == 200 && success.data.status == 500 ){
        //把后台的消息打印出来
        console.log(success.data.msg)
        return;
    }
    if(success.data.msg){
        //把操作成功的信息也打印出来
         console.log(success.data.msg)
    }
    return success.data
},error =>{ //失败的处理
    if(error.response.status == 504 || error.response.status == 404){
        console.log("服务出错")
    }else{
        //服务器返回的错误信息
        if(error.response.data.msg){
            Message.error({message: error.response.data.msg})
        }else{
            Message.error({message: "未知错误"})
        }
    }
    return;
})

//封装请求
let base = 'http://localhost:9090'; //请求的服务器地址

export const getRequest=(url, params)=>{
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params //这是用json来传递的，所以不用加transformRequest转换了
    })
}

export const postRequest=(url, params)=>{
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params  //这是用json来传递的，所以不用加transformRequest转换了
    })
}

export const putRequest=(url, params)=>{
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params //这是用json来传递的，所以不用加transformRequest转换了
    })
}

export const deleteRequest=(url, params)=>{
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params //这是用json来传递的，所以不用加transformRequest转换了
    })
}

3、main.js文件中引入

import {getRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";

4、在组件中使用

以get请求为例，其他请求使用方法类似

this.getRequest('/type/getAll').then(res => {
	//打印服务器返回的数据
	console.log(res);
})

这样就完成了在vue项目中使用axios了

注意：

在开发环境中发送请求一般需要解决跨域问题，这个时候我们可以通过配置代理的方式来解决跨域问题，参考vue-cli3中配置代理。
如果使用上述链接中的方法配置代理，上面封装axios时 let base = ‘http://localhost:9090’ 要改为 let base = ‘’；