vue-cli中使用axios封装以及跨域问题

axios介绍

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中 ， API https://www.kancloud.cn/yunye/axios

1. 浏览器中创建XMLHttpRequests

2. 从node.js中创建http请求 		
   

3. 支持Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF

1. 在vue-cli中安装axios

9. npm install axios -S
10. npm install qs -S
11. 安装后可以到pockage.json查看具体版本， -S是安装到项目中，模块会安装到项目中的node_model下

2. 在Vue-cli中进行axios的封装配置：

12. 创建axios在项目中的路径及文件
    在src下面创建一个axios文件夹，在文件夹下面创建 api.js 和 request.js ,api.js是用来对axios的一些请求
    方式进行封装， request.js 是对axios进行了创建，请求前的一些拦截修改和响应内容的拦截修改。使用
    不用在main.js 中引入
    

13. 配置 request.js文件
    导入 axios 以及 qs依赖
    
    创建axios并进行一些基础配置，
    
    baseUrl 的值在 项目中的config/index.js进行配置，
    
    其中 target 是目标网址的域名，并不是一个完整的路径，只是一个前缀，像本地 http://127.0.0.1:8080
    这种。 change0rigin 是否运行跨域请求

14. 拦截请求进行配置，响应配置同理，根据需要进行配置
    

15. 把创建的axios给暴露出去 export default service;

封装api.js中的axios 请求

首先需要在api.js中把封装好的给引入进来

	![在这里插入图片描述](https://img-blog.csdnimg.cn/20191127144912770.png)

16. get 请求
    

17. post请求
    

在组件中进行引用

18. 在需要使用的组件的把封装好的请求方式 按需引入
    
19. 进行使用

在methods 中对需要发送请求的函数前面使用 async 给变成异步方法

函数中进行调用封装的请求方法进行使用