在日常应用中,一个项目中的网络请求会很多很多,此时一般采取的方案是将网络请求封装起来!
使用npm 安装
$ npm install --save axios
使用 bower:
$ bower install axios
咱们废话不多说直奔主题 =>
打开main.js配置以下
// main,js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'//引入axios
const app = createApp(App)
//将axios挂在到全局
app.config.globalProperties.$axios = axios
app.mount('#app')
配置完成以后我们就可以直接在demo中使用了
this.$axios.post('http://www.***.com',{data:value}).then(res => {
console.log(res.data)
})
-------------------分割线-----以下部分跟以上部分不冲突-----------------
在src目录下创建一个utils目录,并且在utils下创建request.js文件
request.js内容如下
//request.js
import axios from "axios";
import querystring from "querystring";
//status:状态码的信息。 info:具体错误信息
const errorHandle = (status,info) => {
switch(status){
case 400:
console.log('语义有误');
break;
case 401:
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;
}
}
const instance = axios.create({
//网络请求的公共配置
timeout:5000
})
//发送数据之前
instance.interceptors.request.use(
config =>{
if (config.method === "post"){
config.data = querystring.stringify(config.data)
}
//config:包含着网络请求的所有信息
return config;
},
error =>{
return Promise.reject(error)
}
)
//获取数据之前
instance.interceptors.response.use(
response => {
return response.status === 200? Promise.resolve(response) : Promise.reject(response)
},
error => {
const { response } = error;
//错误的处理才是最关键的
errorHandle(response.status,response.info)
}
)
export default instance;
再建个api文件夹,如下分别是index.js\path.js
path.js主要存放api路径 列:
//path.js
const base = {
//主要路径
baseUrl:'http://www.***.com',
//成品路径
chengUrl:'/api/**.java'
}
export default base;
index.js就是最后一道工序,列:
//index.js
import axios from "../utils/request";
import path from "./path.js";
const api = {
//成品详情地址
getChengpin(){
return axios.get(path.baseUrl + path.chengUrl)
}
}
export default api
都配置完成后 就可以直接在vue中使用啦
如何使用:
//demo.vue
<template>
<div class="hello">
<h1>Axios网络请求封装</h1>
</div>
</template>
<script>
name="demo.vue",
import api from "../api/index";
export default {
name: 'HelloWorld',
mounted(){
api.getChengpin().then(res=>{
console.log(res.data)
})
}
}
</script>