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)  但还是推荐创建实例,因为可以对实例进行单独配置,下方讲解
 1 axios({
 2    url:'服务器url',
 3    method:'请求方式' ,
 4    params:{
 5      name:'cc',
 6      age:'18'      
 7    } 
 8 }).then(res=>{
 9    console.log(res) 
10 })
    • axios.all([ ]) 一次执行多个请求【并发请求】
1 axios.all([axios({
2         //第一个请求参数
3     }), axios({
4         //第二个请求参数
5 })])
6  .then(results => {
7     //返回值数组 分别是一与二请求的结果
8     console.log(results)
9  })
    • 设置默认配置【默认属性 可在使用时省略 类似父类】
1 axios.defaults.baseURL = '默认路径'
2 axios.defaults.timeout = 5000

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

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

  4. 创建实例-配置

  • 原因
    • 项目中要请求多个不同url获取数据 因此每个的使用baseUrl 不一定相同。
    • axios是全局的 如果直接使用修改 很可能出现问题
  • 使用
    • 调用axios.create(config)的 api实现创建实例-【其中config为上面的obj对象】
1 const instance = axios.create({
2     baseURL : '请求路径',
3     timeout : 5000
4 }) 

三、应用于vue 封装request方法

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

  • 创建实例
    •   放置默认配置 baseURL等
  • 增加拦截器
    •   可以对访问请求 与 响应拦截操作 对数据进行二次加工
  • 返回网络请求
    •   返回promise对象 完成封装
    •   在外部使用.then()继续实现下一步操作
 1 export function request(config) {
 2     //1.创建axios实例
 3     const instance = axios.create({
 4         baseURL: '',
 5         timeout: 5000
 6     })
 7     
 8     //2.axios拦截器
 9     //2.1请求拦截
10     instance.interceptors.request.use(config=>{
11         //拦截操作
12         return config    //必须返回回去 否则调用处取不到
13     },err=>{
14         //console.log(err)
15     })
16     //2.2响应拦截
17     instance.interceptors.response.use(res=>{
18         //拦截操作
19         return res //必须返回回去 否则调用处取不到
20     },err=>{
21         //console.log(err)
22     })
23     
24     //3发送真正的网络请求【返回promise对象】
25     return instance(config)
26 }
原文地址:https://www.cnblogs.com/cc123nice/p/12593857.html