Vue教程

目录

简介

安装

返回效果

代码演示

全局配置

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();