篇章六 网络请求模块选择——axios

上一篇：【Vuejs进阶版】

一、为什么选择 axios？

axios = ajax i/o system

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 环境中发送 http 请求
• 支持 Promise API
• 拦截请求和相应
• 转换请求和相应数据
• 等等

axios 支持多种请求方式：

• axios(config)
• axios.request(config)
• axios.get(url,[,config])
• axios.delete(url,[,config])
• axios.head(url,[,config])
• axios.post(url[,data[,[,config]]))
• axios.put(url[,data[,config]])
• axios.patch(url[,data[,config]])

二、axios框架的基本使用

1. vue init webpack learnaxios：创建vue项目
2. npm install axios@0.18.0 --save：安装axios【cd到相关目录下】
3. import导入
   

三、axios发送并发请求

1、发送 get 请求演示：

2、发送两个请求并发执行

• 第一种方法：使用axios.all，可以存放多个数组
  
• 第二种方法：axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为 res1,res2
  

4、全局配置

开发中，可能很多参数都是固定的，这个时候我们可以进行一些抽取，也可以利用 axios 的全局配置

常见的配置选项：

四、axios 的实例

1、为什么要创建 axios 的实例（instance）

• 当我们从 axios 模块中导入对象时，使用的实例是默认的实例
• 当给该实例设置一些默认配置时，这些配置就被固定下俩了
• 但是后续开发中，某些配置可能会不太一样
• 比如某些请求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等
• 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息
  

五、如何使用拦截器

请求成功、请求拦截
响应成功、响应拦截

六、axios封装和请求响应劫持

做拦截处理

1、安装axios

npm install axios --save

2、创建模拟的配置文件
新建文件：src\config\index.js

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

3、使用axios做ajax请求

新建文件：src\api\axios.js

import axios from 'axios'
import config from '@/config'

// 判断node的开发模式
const baseUrl = process.env.NODE_ENV ===  'developent' ? config.baseUrl.dev : config.baseUrl.pro
console.log(process.env.NODE_ENV);
class HttpRequest{
    // 配置要请求的URL地址
    constructor(baseUrl){
        this.baseUrl = baseUrl
        // 对请求队列进行处理
        this.queue={}
    }
    // 设置很多的配置
    getInsideConfig(){
         const config = {
            baseURL:this.baseUrl,
            header:{
            //  请求头的配置
            }
         }
         return config
    }
    // 做一个拦截interceptors(请求实例,url)
    interceptors(instance,url){
        // 拦截请求
        instance.interceptors.request.use((config)=>{
            // 处理config,判断是否是所有的拦截都会通过这里
            console.log('拦截和处理请求');
            console.log(config);
            return config;
        })
        // 拦截响应
        instance.interceptors.reponse.use((res)=>{
            // 处理响应
            console.log('处理响应');
            console.log(res);
            return res.data;
        },(error)=>{
            // 请求出问题，处理问题
            console.log(error);
            return {
                error:"网络出错了"
            }
        })
    }
    request(options){
        const instance = axios.create() //创造实例对象
        // 与上文getInsideConfig()形成呼应，options会覆盖掉this.getInsideConfig
        options = Object.assign(this.getInsideConfig(),options)
        // 进行数据劫持
        this.interceptors(instance,options.url)
        return instance(options)
    }

}
// 实例化拦截对象
const axiosObj = new HttpRequest(baseUrl)
// 导出
export default axiosObj

新建文件：src\api\data.js

// 对外做ajax请求
import axios from '@/api/axios'

export const getBannerData = ()=>{
    return axios.request({
        url:"banner",
        methods: 'get'
    })
}

测试：

views\Home.vue文件中

<template>
  <div class="home">
    <h1>HOME</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {getBannerData} from '@/api/data'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  async mounted(){
    let result = await getBannerData()
    console.log(result);
  }
}
</script>

运行elm项目：npm run serve
模拟编写后端数据，供前端使用
与elm同级新建elmserve/index.js文件，内容如下：

let 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://localhost:3000');
})

下一篇：【Vue项目开发】