一. 简述
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) }