axios-【与ajax区别+vue中使用】

一.axios与ajax区别

相同点：都是执行异步请求操作

不同点：

• 大小
  • axios体积小 只需在要使用的目录下 npm install axios --save
  • ajax 需要导入jQuery【体积较大 只是为了ajax去引入是不值得的】
• 针对方向
  • axios 符合前端MVVM的浪潮
  • ajax 本身是针对MVC的编程
• 实现方法与返回值
  • axios 用promise技术实现对ajax技术的封装  返回值是 promise
  • ajax   基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
• 对并发请求的封装api

二.axios应用

　　1. 安装axios 打开需要使用的路径下的命令行

npm install axios --save

　　2. 在需要使用 axios 的地方导入

import axios from 'axios'

　　3. axios实例使用

• 创建实例
  
  • axios可直接使用 axios(config)　　但还是推荐创建实例，因为可以对实例进行单独配置,下方讲解

axios({
   url:'服务器url',
   method:'请求方式' ,
   params:{
     name:'cc',
     age:'18'      
   } 
}).then(res=>{
   console.log(res) 
})

• • axios.all([ ]) 一次执行多个请求【并发请求】

axios.all([axios({
        //第一个请求参数
    }), axios({
        //第二个请求参数
})])
 .then(results => {
    //返回值数组 分别是一与二请求的结果
    console.log(results)
 })

• • 设置默认配置【默认属性 可在使用时省略 类似父类】

axios.defaults.baseURL = '默认路径'
axios.defaults.timeout = 5000

***注意：method:get 请求参数对应 params:{ name:'cc'}

　　　    method:post 请求参数对应 data:{ name:'cc'}

　　4. 创建实例-配置

• 原因
  • 项目中要请求多个不同url获取数据 因此每个的使用baseUrl 不一定相同。
  • axios是全局的 如果直接使用修改 很可能出现问题
• 使用
  • 调用axios.create(config)的 api实现创建实例-【其中config为上面的obj对象】

const instance = axios.create({
    baseURL : '请求路径',
    timeout : 5000
}) 

三、应用于vue 封装request方法

最后对其进行封装requset函数-【为了直接在其他地方直接使用】（分三步）

• 创建实例
  • 　　放置默认配置 baseURL等
• 增加拦截器
  • 　　可以对访问请求 与 响应拦截操作 对数据进行二次加工
• 返回网络请求
  • 　　返回promise对象 完成封装
  • 　　在外部使用.then()继续实现下一步操作

export function request(config) {
    //1.创建axios实例
    const instance = axios.create({
        baseURL: '',
        timeout: 5000
    })
    
    //2.axios拦截器
    //2.1请求拦截
    instance.interceptors.request.use(config=>{
        //拦截操作
        return config    //必须返回回去 否则调用处取不到
    },err=>{
        //console.log(err)
    })
    //2.2响应拦截
    instance.interceptors.response.use(res=>{
        //拦截操作
        return res //必须返回回去 否则调用处取不到
    },err=>{
        //console.log(err)
    })
    
    //3发送真正的网络请求【返回promise对象】
    return instance(config)
}