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>