Axios
- 安装依赖:
npm install axios --save
axios网络请求基础
<template>
<div class="hello">
<h3>Hello World</h3>
<ul>
<li v-for="(item, index) in banner" :key="index">
<p>{{ item.title }}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
import qs from "querystring";
export default {
name: "HelloWorld",
data() {
return {
banner: [],
};
},
created() {},
mounted() {
axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
this.banner = res.data.banner
})
/**
* user_id=iwen@qq.com&password=iwen123
*/
axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
})).then(res =>{
console.log(res.data);
})
},
updated() {},
destoryed() {},
};
</script>
axios网络请求封装
新建utils文件夹,并创建request.js
import axios from "axios"
import qs from "querystring"
/**
* 错误信息处理函数
*/
const errorsHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。")
break;
case 401:
// token:令牌
console.log("服务器认证失败")
break;
case 403:
console.log("服务器已经理解请求,但是拒绝执行它");
break;
case 404:
console.log("请检查网络请求地址")
break;
case 500:
console.log("服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的程序码出错时出现。")
break;
case 502:
console.log("作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。")
break;
default:
console.log(info)
break;
}
}
/**
* 创建Axios的实例对象
*/
var instance = axios.create({
timeout: 5000,
});
/**
* 拦截器
*/
instance.interceptors.request.use(
config =>{
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config;
},
error =>{
return Promise.reject(error);
}
)
instance.interceptors.response.use(
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error =>{
const { response } = error;
if(response){
errorsHandle(response.status,response.info);
}else{
console.log("请求被中断了");
}
}
)
// 封装get 和 post请求
export default instance
base.js
/**
* 存储网络请求路径
*/
const base = {
baseUrl:"http://iwenwiki.com", // 公共地址
banner:"/api/blueberrypai/getIndexBanner.php", // 主页banner数据
login:"/api/blueberrypai/login.php", // 登陆地址
}
export default base;
index.js
/**
* 提供网络请求方法
*/
import axios from "../utils/request"
import base from "./base"
const api = {
getBanner(){
return axios.get(base.baseUrl + base.banner)
},
getLogin(params){ // params = {}
return axios.post(base.baseUrl + base.login,params)
}
}
export default api;
修改HelloWorld.vue页面
<template>
<div class="hello">
<h3>Hello World</h3>
<ul>
<li v-for="(item, index) in banner" :key="index">
<p>{{ item.title }}</p>
</li>
</ul>
</div>
</template>
<script>
import api from "../api";
export default {
name: "HelloWorld",
data() {
return {
banner: [],
};
},
created() {},
mounted() {
// axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
// this.banner = res.data.banner
// })
// /**
// * user_id=iwen@qq.com&password=iwen123
// */
// axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
// user_id:"iwen@qq.com",
// password:"iwen123",
// verification_code:"crfvw"
// })).then(res =>{
// console.log(res.data);
// })
api.getBanner().then((res) => {
this.banner = res.data.banner;
});
api.getLogin({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw",
}).then(res =>{
console.log(res.data);
}).catch(error =>{
console.log(error);
})
},
updated() {},
destoryed() {},
};
</script>
Axios跨域解决方案
模拟跨域
创建文件夹server,并新建index.js
const express = require("express");
const app = express();
app.get("/list",(req,res) =>{
res.send({
status:200,
result:"Hello"
})
})
app.listen(3000,()=>{
console.log("服务器运行在3000端口上");
})
Ctrl+C退出运行状态,安装express
cnpm install express--save
重新启动前台
npm run serve
再开启一个终端启动后台
访问localhost:3000/list
,后台访问正常
修改HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'HelloWorld',
mounted(){
axios.get("http://localhost:3000/list").then(res =>{
console.log(res.data);
})
}
}
</script>
解决方案
- 后台解决
cors解决跨域问题 npm install cors --save
- 前端解决:开发环境下跨域
在项目的根目录下增加vue.config.js
文件,书写跨域配置
修改HelloWorld.vuemodule.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000/', changeOrigin: true, //重写路径 pathRewrite:{ '^/api':"" } } } } }
<template>
<div class="hello">
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'HelloWorld',
mounted(){
axios.get("/api/list").then(res =>{
console.log(res.data);
})
}
}
</script>