vue中封装axios

第一步安装：npm install --save axios
第二步：创建一个api.js 文件,可在src的根目录下创建

代码如下（示例）：

import axios from 'axios';// 超时设置，若30秒之后还在加载中，终止或跳转
axios.defaults.timeout = 30000;// 添加响应拦截器
axios.interceptors.response.use(function (response) {//可以写if判断，提前拦截错误信息// console.log(response) //在获取的接口中的数据之前打印接口中的数据，所以可以在这里判断status状态码if(response.status==200){// this.$router.push({name:'home'})return response;}else if(response.status==404){alert('页面找不到了')}else if(response.status==500){alert('内部服务器错误')}}, function (err) {return Promise.reject(err);
});//export 暴露，导出
export function apiGet(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params,herader:{"token":sessionStorage.getItem('token')}}).then(res => {resolve(res.data);}).catch(err =>{reject(err.data) }) });
}//export 暴露，导出
export function apiPost(url, params){return new Promise((resolve, reject) => {axios({method: 'post',url:url,data:params}).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});}

第三步，在main.js 中声明

import {apiGet,apiPost} from './api/https'
Vue.prototype.$apiGet  = apiGet
Vue.prototype.$apiPost = apiPost

第四步，页面中使用

this.$apiGet
this.$apiPost

vue axios封装相关推荐

vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
vue+axios方法封装(restful,ajax)
this.$get({url: '',data: {},success: (data) => {}}) import qs from 'qs'// axios网络请求 function ajax ...
vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
vue如何封装请求接口方法
vue如何封装请求接口方法方法一首先创建一个server.js文件引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...
vue+element 封装公共js代码
一.多个 js 方法,不想用 vue.prototype 二.使用Vue.prototype 封装公共 js 三.封装的方法较多,又想通过this.直接调用一.多个 js 方法,不想用 vue.pr ...
axios 登录后设置header,vue+axios 全局添加请求头和参数操作
vue+axios 全局添加请求头和参数操作走登录的接口都会返回一个 token 值, 然后存起来方便之后调接口的时候给后台传过去, 传给后台的方式有两种:(具体使用哪种需要和后台商量) 1, 放在 ...

vue axios封装

vue中封装axios

vue axios封装相关推荐

最新文章

热门文章