Vue教程-8-axios

目录

 

简介

安装

返回效果

代码演示

全局配置

Axios实例

封装

拦截器

---

简介

Axios支持：XMLHttpRequests、node.js发送请求、Promisse、拦截请求和响应、转换请求和响应数据，用法有：

axios()

axios.request()

axios.get()

axios.delete()

axios.head()

axios.post()

axios.put()

axios.patch()

axios.all()

安装

npm install axios --save

返回效果

代码演示

import Vue from 'vue' import App from './App' import store from './store'   import axios from 'axios'   Vue.config.productionTip = false   /* 这里记得挂载store，否则this.$store失败，同时注意与import中大小写一致 */ new Vue({   el: '#app',   store,   render: h => h(App) })   axios.defaults.baseURL = 'http://123.207.32.32:8000'   axios({   // url: '/home/multidata'   url: '/home/multidata',   method: 'get',   params: {     type: 'pop',     page: 1   } }).then(res => {   console.log(res); });   axios.all(   [     axios({url: '/home/multidata'}),     axios({url: '/home/multidata'})]) .then(results => {   console.log(results);   console.log(results[1]);   console.log(results[1]); });

全局配置

就是把公共配置抽取出来，这里可以看官网的说明，有很多选项的：

Axios实例

全局配置，就是所有Axios共享同一个配置，但在于某些模块里面，希望使用该模块独有的配置，到了其他模块再去使用其他模块独有的配置，此时就可以使用该特定：

const instance1 = axios.create({   baseURL: 'http://123.207.32.32:8000',   timeout: 5000 });   instance1({   url: '/home/multidata' }) .then(res => {   console.log(res); });

封装

建议只要是引用第三方组件，尽量避免在每个.Vue添加import依赖，否则后续改动，工作量很大的，鉴于此，可以使用这种思想来提供公共服务：

import Axios from "axios"; export function request(config) {   // 创建axios实例   const instance = Axios.create({     baseURL: '',     timeout: 5000   });   // 回调   return instance(config);   // return new Promise((resolve, reject) => {   //   // 创建axios实例   //   const instance = Axios.create({   //     baseURL: '',   //     timeout: 5000   //   });   //   // 回调   //   instance(config)   //     .then(res => resolve(res))   //     .catch(err => reject(err));   // }); }   // 用的时候：request({}).then().catch();

拦截器

import Axios from "axios"; export function request(config) {   // 创建axios实例   const instance = Axios.create({     baseURL: '',     timeout: 5000   });       // axios实例拦截器，既有实例拦截器，也有全局拦截器   // 拦截请求   instance.interceptors.request.use(     config => {       console.log(config);       // 这里要返回config对象       return config;     },     err => {       console.log(err)}   );     // 响应拦截   instance.interceptors.response.use(     resp => {       console.log(resp.data);       return resp.data;     },     err => {       console.log(err);     }   );     // 回调   return instance(config);   // return new Promise((resolve, reject) => {   //   // 创建axios实例   //   const instance = Axios.create({   //     baseURL: '',   //     timeout: 5000   //   });   //   // 回调   //   instance(config)   //     .then(res => resolve(res))   //     .catch(err => reject(err));   // }); }   // 用的时候：request({}).then().catch();