axios的简单封装

html中简单封装axios

/**
 * @author [Moisten] itcode.icu
 * @version 1.0.0
 * @overview 封装axios请求
 * 
 * 调用方法：
 * var datas = values;
 * axiosPostRequst(`register`, datas).then(res => { console.log('post请求--->', res) });
 * 
 */

// 默认环境配置
axios.defaults.baseURL = 'http://192.168.0.102/Home/Index/'

// 请求超时设置
axios.defaults.timeout = 50000

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 请求拦截器
axios.interceptors.request.use(config => {
    return config
})


// post请求
function axiosPostRequst(url, data) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, data)
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

// get请求
function axiosGetRequst(url) {
    return new Promise((resolve, reject) => {
        axios
            .get(url)
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

vue-cli下简单的封装axios

1. 安装 axios

npm install axios --save

1. 在main.js引入 axios

import axios from 'axios'

Vue.prototype.$axios = axios

//默认请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

1. 使用axios

//拼接参数
this.$axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//对象传参
this.$axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//或者使用箭头函数
this.$axios.get('/user?ID=12345')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

//执行多个并发请求
function getUserAccount() {
  return this.$axios.get('/user/12345');
}
function getUserPermissions() {
  return this.$axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(this.$axios.spread(function (acct, perms) {
    //两个请求现已完成
  }));

1. 新建文件封装axios

//引入axios
import axios from 'axios'

//通过promise 封装
export function request(config){
    return new Promise((resolve, reject) => {

        //创建axios实例
        const instance = axios.create({
            baseURL:'http://localhost:8080/api',
            timeout:5000
        })

        //发送请求
        instance(config)
        .then(res => {
            resolve(res);
        })
        .catch(err => {
            reject(err);
        })
    })
}

1. 引用axios

import { request } from '../../api/request'

request({
      url: '/showbanners/index',
      method: 'get'
    })
      .then((res) => {
       console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })

1. 添加拦截器

import axios from 'axios'

//通过promise封装
export function request (config) {
  return new Promise((resolve, reject) => {

    //创建axios实例
    const instance = axios.create({
      baseURL: 'http://localhost:8080/api',
      timeout: 5000
    })

    // 请求拦截
    instance.interceptors.request.use(config => {
      return config
    },
    err => {
      console.log(err)
    })

    // 响应拦截
    instance.interceptors.response.use(result => {
      console.log('拦截数据：=>', result)
      return result
    },
    err => {
      console.log(err)
    })

    //发送请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}