Vue中axios数据请求与拦截器封装及请求时跨域问题的解决
Vue中axios数据请求与拦截器封装及请求时跨域问题的解决
·
一、解释
axios是一个基于promise的第三方数据请求库,可以用在浏览器(前端)和 node.js (后端) 中。
二、安装
下载: npm install --save axios
三、使用
①在src文件夹下新建 api文件夹(封装数据请求的文件夹) util文件夹(工具文件夹)
②创建拦截器 在util下新建一个文件 (service.js) 写入如下内容
import axios from "axios"
// 创建axios实例
const service = axios.create({
baseURL: "http://www.tianqiapi.com/api",
timeout: 100000, //设置超时时间
headers: {
"Content-Type": "application/json;charset=UTF-8",
//"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
}
});
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//config.headers.Authorization = window.sessionStorage.getItem('token')
//最后必须return config 这是固定写法
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么 (当正确的时候做一些操作)
return response;
}, function (error) {
// 对响应错误做点什么
switch(error.response.status) {
case 404:
alert('超时了')
break;
case 500:
alert('内部服务器错误')
break;
default:
alert('别请求了')
break;
}
return Promise.reject(error);
});
export default service
③请求封装在api文件夹下创建一个文件 (index.js ) 用来容纳数据请求的封装
因为上面把axios给了service 所以需要先引入service
import service from "@/util/service.js"
// 开始封装数据请求
// get方法
export function GET(url, data) {
return new Promise((resolve, reject) => {
service.get(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((err) => {
reject(err)
})
})
}
//POST方法
export function POST(url, data) {
return new Promise((resolve, reject) => {
service.post(url, data)
.then(response => {
if (!response.data) {
resolve(response);
}
resolve(response.data);
}, err => {
reject(err);
})
.catch((err) => {
reject(err)
})
})
}
// delete方法
export function DELETE(url,id) {
return new Promise((resolve, reject) => {
service.delete(url+"/"+id)
.then(res => {
if(!res.data){
resolve(res);
}
resolve(res.data);
}, err => {
reject(err);
})
.catch((err) => {
reject(err)
})
})
}
④调用数据请求
比如我在book.js存放当前页面的所以请求
//book.js
import {GET,POST,DELETE} from "./index";
// 这个模块封装所有数据的相关操作(增删改查)
// 添加
export const addApi= data => POST("/books",data);
// 获取列表
export const getTianQiApi= ()=>GET("/?version=v9&appid=23035354&appsecret=8YvlPNrz");
// 删除
export const removeApi=bookid=>DELETE("/books",bookid);
⑤然后在你的组件中去用
<template>
<div>
home.vue
</div>
</template>
<script>
import {getTianQiApi,getApi,removeApi} from "@/api/book.js";
export default{
data(){
return{}
},
mounted(){
getTianQiApi().then(data=>{
console.log("data添加成功",data);
})
.catch(err=>{
console.log("错误",err);
})
},
methods:{}
}
</script>
⑥效果
四、请求时遇到跨域问题了
①为何会跨域?
就是浏览器的安全机制 不同源 (不同端口 不同协议 不同域名)就会造成跨域
②解决跨域
1.jsonp
2.代理跨域
· devServer代理跨域
(1) 需要在vue项目的根路径下创建一个vue.config.js的文件
(2) 写如下内容
module.exports={
devServer:{
proxy:{
"/api":{
// target:"你要解决跨域的地址",
target:"http://www.tian.com.cn/",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
}
}
}
( 3 ) 修改我们的请求路径为/api
export default {
mounted( ) {
axios.get ( "/api/data/cityinfo/1012121.html " ).then( res => {
console.log( res)
})
}
}
( 4 ) 因为我们修改了配置文件 那么项目必须重启
· nginx反向代理
3.CORS(后端配合)
更多推荐
已为社区贡献23条内容
所有评论(0)