vue axios 拦截器配置与封装

一、安装

1、利用npm安装npm install axios --save

--save：安装在生产环境

二、例子

要想统一处理所有http请求和响应，就得用上 axios 的拦截器。

axios.js

import axios from 'axios'
// @ == src
import baseUrl from '@/config'/*
* 增加请求拦截器
*/
axios.interceptors.request.use((config) => {// 预处理请求的信息return config
}, (error) => {// 预处理请求有异常error时抛出错误return Promise.reject(error)
})/*
* 增加相应拦截器
*/
axios.interceptors.response.use((response) => {// 预处理相应的数据return response
}, (error) => {// 错误返回 状态码验证return Promise.reject(error)
})/*** 返回axios方法* @param url（如果传绝对地址则baseURL不会追加到url之前）* @param method* @param timeout* @param data* @param headers* @param dataType* @returns {AxiosPromise}*/
export default function (url, {// 默认求情方式postmethod = 'post',// 超时timeout = 10000,// 请求主题data = {},// 请求头headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8;'},// 文件类型dataType = 'json'
}) {// 可根据不同method动态配置headersif (method === 'get') {headers = Object.assign({}, headers)} else {headers = Object.assign({}, headers)}const config = {method: method,timeout: timeout,url: url,// 在外部文件配置axios的基础路径 ip地址baseURL: baseUrl.URL_EASYMOCK,data: data,headers: headers,dataType: dataType}return axios(config)
}

config.js

配置请求的ip端口号地址

// baseUrlconst DOMAIN_NAME = {
// ip:端口号URL_EASYMOCK: 'http://localhost:3030'
}export default DOMAIN_NAME

api.js

所有的请求都写在一个对象中，方便调用

import axios from './axios'
const requests = {getUser (data = {}) {// user 请求接口return axios('user', {// 请求方法method: 'get',// 请求体data: data})}
}
// 导出对象，然后在全局注册或在单个vue文件下调用
export default requests

api.vue

调用api.js中的方法

<template><div class="api">    </div>
</template><script>
// 在文件中调用import axios from '@/server/api';export default{data() {return {msg: 'hello vue'}},methods: {/*** 接口请求*/getUser() {// axios 本省就是prmoise分装的axios.getUser().then((res) => {console.log(res);}).catch((err) => {console.log(err);})}}}
</script><style scoped>
</style>

在main.js中声明使用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入请求数据的对象
import axios from '@/server/api'Vue.config.productionTip = false
// 全局声明
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

app.vue请求改成,不用再每个vue文件中引入

 import axios from '@/server/api';

/*** 接口请求*/getUser() {// axios 本省就是prmoise分装的axios.getUser().then((res) => {console.log(res);}).catch((err) => {console.log(err);})}

vue axios 拦截器配置与封装相关推荐

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
vue 请求拦截器配置
按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置请求拦截器有一个Authorization认证,判断登录状态之后再决定 ...
vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs'// 创建axios实例 const service = axios.create ...
Vue axios拦截器使用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下 axios使用拦截器在请求或响应 ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
axios 拦截器不生效填坑
Vue axios拦截器不生效填坑: 1.let instance = axios.create();//此处创建拦截器,拦截器处理过程省略 2.Vue.prototype.$http = insta ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
Vue的axios拦截器
Vue的axios拦截器为什么要使用拦截器? 在页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,如:判断token,设置请求头.如果请求数非常多,单独对每一个请求进行处理会变得 ...

vue axios 拦截器配置与封装

vue axios 拦截器配置与封装相关推荐

最新文章

热门文章