一.Axios基本用法
npm install axios --save
第一步: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)
})
形式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=1
export const femaleNameApi = function (paramsData) {
return axios
.get('/top/femaleNameApi',{
params: {
...paramsData,
}
})
.then(res=>res.data)
}
//name
export 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 error
return Promise.reject(error);
}
);
axios.interceptors.response.use(
function(response) {
if (!response.config.url.endsWith('/user/get_user_by_token')) {
// Do something with response data
if (response.data.code === 403) {
router.push({ path: '/login' });
}
}
return response;
},
function(error) {
// Do something with response error
return 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);
}
}