vue-新建项目1

使用vue create新建项目之后，要封装一下axios和请求响应劫持

• 1 新建config文件夹，然后新建index.js文件，写配置
  config / index.js

export default {
    title: 'demo',
    baseUrl: {
        dev: 'http://localhost:3000', // 开发的时候后台接口的地址
        pro: '' // 上线产品发布之后，后台接口的地址
    }
}

• 2 然后新建api文件夹，然后在里面新建axios.js封装axios
  api / axios.js

import axios from 'axios';
// 引入配置
import config from '@/config';
// 判断是开发环境还是生产环境
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;

class HttpRequest {
    constructor(baseUrl) {
        this.baseUrl = baseUrl,
        // 请求队列，可能会有很多的请求
        this.queue = {}
    }
    // 进行配置，内部的配置
    getInsideConfig() {
        const config = {
            baseURL: this.baseUrl,
            header: {

            }
        }
        return config
    }
    // 拦截请求
    // instance是传入的请求实例对象
    interceptors(instance, url) {
        // instance请求实例拦截
        instance.interceptors.request.use((config) => {
            // 做配置的修改，处理config
            console.log('拦截和处理请求');
            console.log(config,123, url);
            // 可以在这里改配置，比如修改data
            config.data = { msg: 'hello word' }
            // 处理之后要返回配置
            return config
        })
        // 拦截响应
        instance.interceptors.response.use((res) => {
            // 处理响应
            console.log('处理响应');
            // console.log(res);
            // 处理之后返回
            // return res
            // 处理响应，比如直接返回res中的data
            return res.data
        }, (error) => {
            // 请求出问题，处理问题
            console.log(error);
            return { error: '网络出问题了' }
        })
    }
    request(options) {
        const instance = axios.create()     // 创建实例对象
        // options是配置选项，使用assign进行复制，options会覆盖掉内部配置的相同的内容，保留新加的内容
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance, options.url)
        return instance(options)
    }
}


// 实例化
const axiosObj = new HttpRequest(baseUrl)
export default axiosObj

• 3 在api文件夹下新建data.js文件，所有的axios请求都放在这个文件夹里面
  
  data.js

// 所有的请求都放在这个data.js文件中

// 引入疯转的axios
import axios from '@/api/axios';

// 配置getBannerData请求
export const getBannerData = () => {
    // 返回axios请求结果
    return axios.request({
        // 传入options配置
        url: '/banner',
        method: 'get'
    })
}

在页面中使用配置的请求

import { getBannerData } from '@/api/data'

export default {
	name: 'Home',
	
	async mounted() {
		let result = await getBannerData()
		// 得到响应结果后打印
		console.log(result);
	}
}
</script>

跨域问题

• 1 可以在后端解决跨域，使用node演示

const express = require('express')

let app = express();

// 解决跨域
app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', '*');
    res.append('Access-Control-Allow-headers', '*');
    next();
})


app.get('/', (req, res) => {
    res.json({ msg: '这是首页' })
})
app.get('/banner', (req, res) => {
    res.json({ msg: '这是banner' })
})

app.listen(3000, () => {
    console.log('http server port at 3000');
})

• 2 在开发阶段，我们也可以配置跨域请求代理
  1 在项目文件夹下新建vue.config.js文件，配置跨域请求代理

module.exports = {
    devServer: {
        proxy: {
            // 以/api开头的请求代理到target对应的地址
            '/api': {
                target: 'http://localhost:3000',
                // 重写路径
                pathRewrite: {
                    // 匹配到api，替换成''
                    '^/api': ''
                }
            }
        }
    }
}

修改完成之后需要重新npm run serve
然后修改一下config / index.js配置

export default {
    title: 'demo',
    baseUrl: {
        // dev: 'http://localhost:3000', // 开发的时候后台接口的地址
        dev: '/api/', // 跨域请求代理
        pro: '' // 上线产品发布之后，后台接口的地址
    }
}

这样就可以请求3000端口的地址了