Vue项目中如何使用Axios封装http请求详解

红太狼 2023-09-24 07:48 72阅读 0赞

前言

使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。

下载源码

安装

npm install axios --save

建立http.js文件

在/src/utils/目录下建立一个htttp.js

1.首先导入axios和router。

import axios from 'axios';

import router from 'https://www.jb51.net/router';

2.接着设置axios请求参数。

axios.defaults.timeout=5000; //请求超时5秒

axios.defaults.baseURL=''; //请求base url

axios.defaults.headers.post\['Content-Type'\]='application/x-www-form-urlencoded'; //设置post请求是的header信息

如果你要用到session验证码功能，让请求携带cookie，可以加上以下一行：

axios.defaults.withCredentials=true

3.然后，我们要给请求加个拦截器，就是在请求即将发送之前，我们需要给请求添加信息，比如下面的代码中，我们给请求添加header信息，header中添加token，这样每次请求都会在header中携带token信息。这在我们的接口开发中经常用到。

//http request 拦截器

axios.interceptors.request.use(

config=> \{

let token=sessionStorage.getItem('token')

if (token) \{ // 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers=\{

'X-token': token

return config

\},

err=> \{

return Promise.reject(err)

)

4.接下来，我们看下请求返回时的拦截器。

比如我们发送请求时，如果后端返回错误代码，则前端应该提示信息。比如后台返回没有权限，不允许访问，跳转到登录页，这些都可在拦截器上完成。

axios.interceptors.response.use(

response=> \{

if (response.data.code===4003) \{

Toast(\{

mes: '您没有权限操作！',

timeout: 1500,

callback: ()=> \{

router.go(-1);

\});

return false;

if (response.data.code===-1) \{

localStorage.removeItem('token')

router.push(\{

path:"/login",

querry:\{redirect: router.currentRoute.fullPath\}//从哪个页面跳转

\})

return response

\},

err=> \{

if (err.code==='ECONNABORTED' && err.message.indexOf('timeout') !==-1) \{

Toast(\{

mes: '网络异常，连接超时...',

timeout: 1500

\});

return Promise.reject(err)

)

5.现在我们来封装一个get方法：

export function get(url, params=\{\}, headers=\{\})\{

return new Promise((resolve, reject)=> \{

axios.get(url,\{

params: params,

headers: headers

\})

.then(response=> \{

resolve(response.data);

\})

.catch(err=> \{

reject(err)

\})

6.再封装一个post方法：

export function post(url, data=\{\})\{

return new Promise((resolve, reject)=> \{

axios.post(url, data)

.then(response=> \{

resolve(response.data);

\}, err=> \{

reject(err)

\})

使用

在main.js中引入：

import \{post,get\} from 'https://www.jb51.net/article/utils/http'

//定义全局变量

Vue.prototype.$post=post;

Vue.prototype.$get=get;

在组件中使用：

this.$post(url, params)

.then((res)=> \{

if (res.result==='success') \{

this.$message(\{

message: '登录成功！',

type: 'success'

\})

this.$router.push('/main')

\} else \{

this.$message.error(res.msg)

this.refreshCode();

\});

这段代码是用户登录发送post请求的代码示例，其他get请求也是一样的处理方式。接下来我们会有文章具体讲解如何使用封装好的axios实现登录的例子，敬请关注。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:vue中Axios的封装与API接口的管理详解详解Vue 2.0封装axios笔记vue 里面使用axios 和封装的示例代码axios对请求各种异常情况处理的封装方法axios封装，使用拦截器统一处理接口，超详细的教程(推荐)解决vue axios的封装 请求状态的错误提示问题详解vue中axios请求的封装vue中axios的二次封装实例讲解使用async await 封装 axios的方法axios的简单封装以及使用实例代码