axios,拦截器,封装

一.Axios基本用法

安装

 npm install axios --save

axios跨域解决

第一步：config中index.js中配置

   proxyTable: {'/yizhan': {target: 'https://m.1zhanche.com',changeOrigin: true,pathRewrite: {'^/api': ''}},'/top': {target: 'https://www.apiopen.top',changeOrigin: true,pathRewrite: {'^/top': ''}},'/damai': {target: 'http://www.web520.xyz/web-projectAPI/index.php',changeOrigin: true,pathRewrite: {'^/damai': ''}}},

第二步：使用

let dataParam = {start:10,count:10
}
axios.get('/api/v2/movie/top250',{params: {...dataParam,}
})
.then(function (res) {console.log(res.data)
})
let dataP = {q:"挪威的森林"
}
axios.get('/api/v2/book/search',{params: {...dataP,}
})
.then(function (res) {console.log(res.data)
})

二．封装api

形式1：

import axios from 'axios'
axios.interceptors.request.use(function (config) {console.log("a")return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {console.log("b")return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);

    });//page=1export const femaleNameApi = function (paramsData) {return axios.get('/top/femaleNameApi',{params: {...paramsData,}}).then(res=>res.data)}//nameexport const searchMusic = function (paramsData) {return axios.get('/top/searchMusic',{params: {...paramsData,}}).then(res=>res.data)}

调用api

import {getBook,getMovies} from './api/api'
created:function () {let dataParam = {start:10,count:10}getMovies(dataParam).then((data)=>{console.log(data)})let dataP = {q:"村上春树",count:10,start:10}getBook(dataP).then((data)=>{console.log(data.books)})
}

形式2：使用promise封装axios

import axios from 'axios';import router from '../router'; axios.defaults.timeout = 100000;/*const apiUrl = 'http://shopping.zhongguotengcha.com';*/const apiUrl = 'http://vinetea.weibeicc.com';axios.interceptors.request.use((config) => {let pathUrl = ['/index/login_with_pwd','/index/login_with_msgCode','/mobileCode/send_mobile_code','/index/register','/mobileCode/check_code_no_login','/index/reset_loginPwd',];const token = JSON.parse(window.localStorage.getItem('token')) || '';if (!pathUrl.some((it) => config.url.endsWith(it))) {if (token) {config.headers['Authorization'] = `${token}`;}}return config;},function(error) {// Do something with request errorreturn Promise.reject(error);});axios.interceptors.response.use(function(response) {if (!response.config.url.endsWith('/user/get_user_by_token')) {// Do something with response dataif (response.data.code === 403) {router.push({ path: '/login' });}}return response;},function(error) {// Do something with response errorreturn Promise.reject(error);});const axiosPost = (url, params = {}) => {return new Promise((resolve, reject) => {axios.post(apiUrl + url, params).then((response) => {resolve(response.data);},(err) => {reject(err);}).catch((error) => {reject(error);});});};const axiosGet = (url, params = {}) => {return new Promise((resolve, reject) => {axios.get(apiUrl + url, {params: params,}).then((response) => {resolve(response.data);},(err) => {reject(err);}).catch((error) => {reject(error);});});};export default {get: axiosGet,post: axiosPost,};

二.使用
方法1：
1.main.js

import ajax from "./data/api.js"
Vue.prototype.$ajax = ajax;

2.app.vue

let params = {page:1
}
this.$ajax.get("/top/femaleNameApi",params).then((res)=>{console.log(res);
})

形式3：加入await和ansyc的使用
1.main.js

import ajax from "./data/api.js"
Vue.prototype.$ajax = ajax;

2.app.vue

created:async function(){
let params = {
page:1
}
await this.femaleNameApi(params);
},
methods:{
async femaleNameApi(params){
let res = await this.$ajax.get("/top/femaleNameApi",params);
console.log(res.data);
}
}

axios,拦截器,封装相关推荐

axios拦截器封装与使用
拦截器封装 import axios from "axios" // 创建axios 赋值给常量service const service = axios.create();// ...
axios拦截器封装
什么是axios? axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样.简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装 ...
axios 拦截器封装
1.新建文件request.js import axios from 'axios'// 创建axios实例 const service = axios.create({baseURL: proces ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
5 拦截器拦截请求路由_手写简易版axios拦截器，实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...
axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
axios拦截器、ElementUI组件的使用
一.axios拦截器 1.axios模块的作用是对基于http请求的封装.在浏览器对异步请求对象XMLHttpRequest进行封装 2.拦截器 (1)请求拦截器:对客户端发起的请求进行统一的前 ...

axios,拦截器,封装

安装

axios跨域解决

二．封装api

axios,拦截器,封装相关推荐

最新文章

热门文章