vue
和 axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
demo 练习
目录结构
src
--networkAxios
----axios_instance.js
----home.js
src/networkAxios/axios_instance.js 文件内容
// axios 封装............
import Axios from 'axios'
// import Qs from 'qs'
// qs 对请求的参数进行序列化
export default function axios_instance(option) {
return new Promise((resolve, reject) => {
// 创建 axios 实例
const instance = Axios.create({
baseURL: 'http://demo.yizheng_fei.com/api',
// baseURL: 'https://gank.io/api',
timeout: 300000,
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
},
});
// 配置请求
instance.interceptors.request.use(config => {
// 判断token,用于登录
// 请求数据序列号
// config.data = Qs.stringify(config.data)
return config;
}, error => {
// 网络请求失败
return error;
});
// 配置响应拦截
instance.interceptors.response.use(response => {
return response.data;
}, error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误';
break;
case 401:
error.message = '未授权的访问';
break;
case 403:
error.message = '没有权限';
break;
case 500:
case 501:
case 503:
default:
error.message = '服务器出问题';
break;
}
}
return error;
});
// 传入对象进行网络访问
instance(option).then(res => {
resolve(res);
}).catch(error => {
reject(error)
});
});
}
src/networkAxios/home.js 文件内容
import axios_instance from './axios_instance'
export function getWeatherData() {
return axios_instance({
url: '/user/detail?id=3'
// url: '/v2/categories/GanHuo'
})
}
src/views/Home.vue 文件内容
<template>
<div id="home">
<div>我是home <input type="button" value="点击请求数据" @click="fetch_data()">点击请求数据</div>
</div>
</template>
<script>
import {getWeatherData} from "../networkAxios/home"
export default {
name: "Home",
methods:{
fetch_data() {
getWeatherData().then(res=>{
console.log(res.data);
})
}
}
}
</script>
<style scoped>
</style>