本文共 3164 字，大约阅读时间需要 10 分钟。

axios

1. axios框架的基本使用

• 安装并导入

  

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})

2. axios发送并发

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})//2.axios发送并发请求axios.all([axios({     url: 'http://123.207.32.32:8000/home/multidata'}),axios({     url: 'http://123.207.32.32:8000/home/data',  params: {       type: 'sell',    page: 5  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })const obj= {     name: 'kobe',  age: 12}const {   name,age}=objconst names=['qqq','www','eee']const name1=names[0]const name1=names[1]const name1=names[2]const [name1,name2,name3]=names

3. axios的配置信息相关

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')// axios({   //   url: 'http://123.207.32.32:8000/home/data',//   //专门针对get请求的参数拼接//   params: {   //     type: 'pop',//     page: 1//   },//   methods: 'get'// }).then(res => {   //   console.log(res)// })//// axios({   //   url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',//   methods: 'get'// }).then(res=>{   //   console.log(res);// })axios.defaults.baseURL= 'http://123.207.32.32:8000'//2.axios发送并发请求axios.all([axios({     url: '/home/multidata'}),axios({     url: '/home/data',  params: {       type: 'pop',    page: 1  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })

4. axios拦截器的使用

import axios from "axios";export function request(config,success,failure) {       //1.创建axios实例    const instance= axios.create({           baseURL: 'http://123.207.32.32:8000',        timeout: 5000    })    //2.axios的拦截器    //2.1 请求拦截的作用    instance.interceptors.request.use(config => {           console.log(config);        //1.比如config中的一些信息不符合服务器的要求        //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标        //3.某些网络请求（比如登录token）必须携带一些特殊的信息        return config    },error => {           console.log(err);    })    //2.2 响应拦截    instance.interceptors.response.use(res => {           console.log(res);    },err => {           console.log(err);    })    //3.发送真正的网络请求    instance(config)        .then(res=>{               success(res);        })        .catch(err => {               failure(err)        })}

转载地址：http://zfox.baihongyu.com/