vue 网络请求 axios

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  1. 作用：类似于jQuery的$.ajax作为网络请求的封装组件

  2. 使用流程

    • 安装 npm install vue-axios --save

在main.js 中使用 

import axios from \'axios\'

             vue.prototype.$ajax= axios

    • 说明：

    1. 默认是get请求

    2. 有跨域请求

    3. 返回值是Promise对象

    • 直接使用

this.$http({
        method: \'get\',
        url: \'https://api.coindesk.com/v1/bpi/currentprice.json\',
        data: {
          name: \'virus\'
        }
     })

  1. 封装

    1. 原因：第三方框架一旦出现停止维护  项目更改网络请求方式变得很繁琐 

    2. 流程

                      1)新建require.js对axios进行封装

import axios from \'axios\'

export function requst (config){
       const Axios=axios.create({//实例化
                baseURL:config.url，
               timeout:3000

       })
     return Axios(config)//返回值是Promise对象

}

2) 在组件里面引用   import {requst} from \'./require.js\'

                       3) requst({url:\'\'}).then(result=>{}).catch(err=>{})

3 多个网络请求

     requst([fun1,fun2]).then(result=>{}).catch(err=>{});

  •  fun1 返回的是promise的对象

  • result 是个数组  可用const [s1,s2]=result; 或者用axios.spread((res1,res2)=>{})

4  全局配置

  • axios.defaults.baseURL=\'https://1239999\';

  • axios.defauts.timeout=6000//ms

5  拦截器：拦截每一次你的请求和响应，然后进行相应的处理。

如：一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器。

  • 作用

  1. 方便调试

  2. 登录检测未有token 可以先去登录处理

  3. config中的请求信息不符合要求

  4. 请求时可以出现一个loading图片

  • 一共有4种  请求2种，应答2种

  1. axios.interceptors.requst.use(config=>{console.log(config);return config;//必须返回 不然没有请求参数了},err=>{conosole.log(err})

  2. axios.interceptors.reponse.use(result=>{console.log(result);return result;//必须返回 不然得不到没有应答了},err=>{conosole.log(err})

以上是 vue 网络请求 axios 的全部内容， 来源链接： utcz.com/z/375772.html

回到顶部