vue中 二次封装 axios

1. 安装axios

	npm install axios

2. 引入axios

• 首先在src下创建utils文件夹，用来存放封装的js, 及页面接口api
  在utils文件夹下创建request.js
  request.js

	// 引入 axios
	import axios from 'axios'
	
	// 设置请求方式请求头 设置不设置都可以,get请求默认就是这个请求头
	axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
	// 创建axios实例
	const service = axios.create({
    
    
	    // axios中请求配置有baseURL选项，请求URL公共部分
	    baseURL: 'https://www.baidu.com/prod-api/',  // 使用的时候注意替换成自己地址
	    // 配置超时时间
	    timeout: 10000
	})

	//请求拦截  发请求的时候进行拦截  主要使用在请求时挈带token
	service.interceptors.request.use(config => {
    
    
		// 配置 post请求专属的请求头, 如果后台参数没有要求,不可以不进行配置
		if (config.method === 'post') {
    
    
        	config.headers["Content-Type"] = "application/x-www-form-urlencoded";
    	}
    	    // get请求映射params参数
	    if (config.method === 'get' && config.params) {
    
    
	        let url = config.url + '?';
	        for (const propName of Object.keys(config.params)) {
    
    
	            const value = config.params[propName];
	            var part = encodeURIComponent(propName) + "=";
	            if (value !== null && typeof (value) !== "undefined") {
    
    
	                if (typeof value === 'object') {
    
    
	                    for (const key of Object.keys(value)) {
    
    
	                        if (value[key] !== null && typeof (value[key]) !== 'undefined') {
    
    
	                            let params = propName + '[' + key + ']';
	                            let subPart = encodeURIComponent(params) + '=';
	                            url += subPart + encodeURIComponent(value[key]) + '&';
	                        }
	                    }
	                } else {
    
    
	                    url += part + encodeURIComponent(value) + "&";
	                }
	            }
	        }
	        url = url.slice(0, -1);
	        config.params = {
    
    };
	        config.url = url;
	    }
	    return config
	}, error => {
    
    
	// 请求错误处理
	    Promise.reject(error)
	})
	
		// 响应拦截  主要是对返回的参数进行统一的处理 
	service.interceptors.response.use(res => {
    
    
		// 这里就是请求成功时候后台返回的参数, 我这里没有进行其他操作就直接把数据给返回出去了
		// 有需要的话可以进行对数据的简单操作,例如 判断token是否勾起之类的
	    return res.data
	}, error => {
    
    
		// 请求失败处理.道理同上
		// 我这里也是没有进行处理
	    return Promise.reject(error)
	})
	// 记得暴露出去,不然白写这么多了
	export default service

3. 引入封装的axios进行api 封装

• 在utils下创建api文件引入封装好的axios
  api.js

	// 引入
	import request from '@/utils/request'
	// get 请求
	export const getPhoneCode = (query) => {
    
    
	    return request({
    
    
	        url: '/api/member/getUserPhoneCode',
	        method: 'get',
	        params: query
	    })
	}
	// post 请求
	export const getPhoneCode = (data) => {
    
    
	    return request({
    
    
	        url: '/api/member/getUserPhoneCode',
	        method: 'post',
	        data: data
	    })
	}
	// delete 请求
	export const getPhoneCode = (id) => {
    
    
	    return request({
    
    
	        url: '/api/member/getUserPhoneCode?id='+id,
	        method: 'delete'
	    })
	}

4.页面中使用

	<template>
		<button @click="getCode">获取验证码</button>
	</template>
	<script>
	// 根据自己的文件夹引入api文件之后使用
	import {
    
     getPhoneCode } from '../utils/api'
		export default {
    
    
			data(){
    
    
				return {
    
    
					from:{
    
    
						tel:'10086'
					}
				}
			},
			methods:{
    
    
				getCode(){
    
    
					getPhoneCode(this.from).then((res)=>{
    
    
						console.log(res)  // 请求之后拿到的数据
					}).catch((err)=>{
    
    
						console.log(err)  // 请求错误之后的数据
					})
				}
			}
		}
	</script