ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中使用axios

2021-11-26 13:00:26  阅读:139  来源: 互联网

标签:axios success url error vue params 使用 data


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 = ‘’;

标签:axios,success,url,error,vue,params,使用,data
来源: https://blog.csdn.net/jiangjunyuan168/article/details/121557080

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有