前端(十三)

299 阅读1分钟
封装axios请求工具

//模块一接口const service1 = {    getJsonA: {        method: "get",        url: "/json.json"    },    getB: {        method: "post",        url: "/loginSubmit"    }}//模块二接口const service2 = {    getJsonC: {        method: "get",        url: "/json.json"    },    getD: {        method: "post",        url: "/loginSubmit"    }}module.exports = {    service1,    service2}


import services from './service'import axioscopy from 'axios'//做一些全局配置let axios = axioscopy.create({    baseURL: "http://192.168.1.136:8088/weixin"})//所有的请求方法封装const http = {}//请求拦截器axios.interceptors.request.use(    // 发起请求前    config => {        console.log("开始请求")        return config    },    // 请求失败    error => {        console.log("发起请求失败")        return Promise.reject(error)    })//响应拦截器axios.interceptors.response.use(    // 请求成功    res => {        console.log("响应成功")        return res    },    // 请求失败    error => {        console.log("响应失败")        return Promise.reject(error.response.data)    })//请求格式和参数的统一Object.keys(services).forEach(service => {    service = services[service]    //请求格式和参数的统一    for (let key in service) {        let api = service[key] //url 和methed        http[key] = async function (params, isFormData = false, config = {}) {            let newParams = {}            //如果是FormData,把数据放到FormData对象中去            if (params && isFormData) {                newParams = new FormData()                Object.keys(params).forEach(element => {                    newParams.append(element, params[element])                });            } else {                //如果不是                newParams = params            }            //开始不同请求的判断            let response = {} //请求的返回值            if (api.method === "post" || api.method === "put" || api.method === "patch") {                try {                    response = await axios[api.method](api.url, newParams, config)                } catch (err) {                    return Promise.reject(err)                }            } else if (api.method === "delete" || api.method === "get") {                config.params = newParams                try {                    response = await axios[api.method](api.url, config)                } catch (err) {                    return Promise.reject(err.data)                }            }            return response        }    }})export default http

使用:

mian.js

import http from './service/http'Vue.prototype.$http = http

this.$http