【备战春招】第7天 CRMEB多环境配置/http封装

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 2-4环境配置/http封装
课程讲师： CRMEB

课程内容：
1、首先安装axios封装请求用到的库，在config中封装不同环境下请求到的接口地址

export const API_HOST = process.env.VUE_APP_API_HOST
export const  API_TIME_OUT = process.env.VUE_APP_API_TIME_OUT

2、在utils下新建http.js 文件，封装请求的公共的接口

import axios from 'axios'
import {API_HOST,API_TIME_OUT } from '@/config/http'

// 自定义的一个axios对象:根据项目进行修改
const http= axios.create({
	baseURL:  API_HOST,
	timeout:API_TIME_OUT
})
// axios请求拦截器
http.interceptors.request.use(config => {
	return config
},error => {
	return Promise.reject(error)
}); 
// axios 响应拦截器
http.interceptors.response.use(response => {
	return response.data
},error => {
	return error
})

// 重点：在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
axios.defaults.adapter = function(config) { //自己定义个适配器，用来适配uniapp的语法
    return new Promise((resolve, reject) => {
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                console.log("执行完成：",response)
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };

                settle(resolve, reject, response);
            }
        })
    })
}

export default http

3、在api下新增一个首页的home.js 数据请求接口

import http form '@/utils/http'
export const homeData = () => {
	const url = 'api/v2/diy/get_diy/moren'
	return http.get(url)
}

4、 在index.vue中引用接口

	import {homeData as homeDataApi } from '@/api/home'
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			this._getHomeData() 
		},
		methosd: {
			async _getHomeData(){
				const {status,data,msg} = await  homeData()
				console.log(status,data,msg)
			}
		}
	}

课程收获：
这个章节主要学到了请求数据的流程，首先根据不同的环境配置不同，然后在config中封装公共的根据不同环境接收不同的接口，再在utils中封装http中封装公共的axios请求，再在api中定义所需要的接口home.js, 最后在index.vue 中引入用就好