vue中引入axios

一. 简述

vue项目中引入axios，它作用和ajax一样来提供网络请求服务。

二. 步骤

1.引用axios：yarn add axios

2.封装axios:

/**
 * @description axios 网络请求封装
 * @author xudanfeng
 */

import axios from 'axios'
let querystring = require('querystring')

axios.defaults.baseURL = 'http://****:端口号'
axios.defaults.timeout = 5000 // 超时时长
axios.defaults.withCredentials = true // 携带cookie
// 这样设置无效，需要在拦截器中设置
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

axios.interceptors.request.use(config => {
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  }
  return config
}, err => {
  return Promise.reject(err)
})

axios.interceptors.response.use(response => {
  console.log(response, 'cccc====')
  return response
}, err => {
  if (err.response.status === 401) {
    console.log('ddd', router)
    // router.replace('/login')
  }
  return Promise.reject(err)
})

/**
 * get请求
 * @param {string} url 请求url
 * @param {Object} data 请求参数
 */
export function get (url, data = {}) {
  return axios.get(url, {params: data})
}

/**
 * post请求
 * @param {string} url 请求url
 * @param {Object} data 请求参数
 */
export function post (url, data = {}) {
  return axios.post(url, querystring.stringify(data))
}

/**
 * post请求
 * @param {string} url 请求url
 * @param {Object} data 请求参数
 */
export function postWithJson (url, data = {}) {
  return axios.post(url, data)
}

/**
 * post form参数请求
 *
 * @param {string} url 请求 url
 * @param {Object} data 发送的数据
 * @return {Promise}
 */
export function form (url, data = {}) {
  return axios.post(url,
    querystring.stringify(data),
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )
}

3.使用axios：

import {get, post, form} from '@/common/net/serviceUtil'

/**
 * 测试列表
 * @param {string} params.name
 * @param {Object} params.pageDto
 *
 * @returns {Promise}
 */
export function tagList (params) {
  return get('/user/list', params)
}