• Vue中axios的使用技巧配置项详解


    使用axios首先要下载axios模块包

    npm install axios --save

    其次需要在使用的文件中引入

    import axios from 'axios'

    一、调用axios常见两种方法(此处使用easy-mock模拟数据接口):

    复制代码
    //方法1
          axios({
            method: 'post',
            url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
          })
          .then((response)=>{
              console.log(response.data)
          })
          .catch((error)=>{
              console.log(error)
          })
    复制代码
    复制代码
    //方法2
        axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
          miaov:"课堂"  //发送的数据
        })
          .then((response)=>{
            console.log(response.data)
          })
          .catch((error)=>{
            console.log(error)
          })
    复制代码

    注意:

    方法一中向后台发送数据时:

    复制代码
    //get方式发送数据
                axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
                    params: {
                        pomelo: 'tt',
                        test: 'test'
                    }
                }).then((response) => {
                    console.log(response)
                }).catch((error) => {
                    console.log(error)
                })
    //post方式发送数据
               axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
                    pomelo: 'tt',
                    test: 'test'
                }).then((response) => {
                    console.log(response)
                }).catch((error) => {
                    console.log(error)
                })
    复制代码

    二、自定义请求实例

    复制代码
    //常见请求实例配置项
    {
         baseURL: ‘’,  //基础URL
         timeout:1000,  //请求延时时间
         headers {'X-Requested-With': 'XMLHttpRequest'},   //自定义请求头内容
         responseType: 'json',  //请求数据类型包括  'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
         params: {},  //无论请求为何种类型,在params中的属性都会以key=value的格式在urlzhong拼接
         transformRequest: [function(data){
             return data
         }],   // 只适用于 POST,PUT,PATCH,transformRequest` 允许在向服务器发送前,修改请求数据。后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
         transformResponse: [function(data){
             return data
         }],   //transformResponse` 在传递给 then/catch 前,允许修改响应数据
         validateStatus: function(status){
      return status < 400 //状态码小于400时均为成功(返回true)
    }, //validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte cancelToken //取消请求,下文详细说明 }
    复制代码

    使用自定义请求实例时需要先创建对象

    var HTTP = axios.create({})   // {}中放入上文中的配置项

    使用transformRequest将数据格式改为key=value的格式

    复制代码
    import queryString from 'queryString'  //转换格式包,无需下载
    
    
      var HTTP = axios.create({
        baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
        timeout: 1000,
        responseType:'json',
        headers:{
          'custome-header': 'miaov',
          'content-type':'application/x-www-form-urlencoded'   //转换为key=value的格式必须增加content-type
        },
        transformRequest:[function(data){
            console.log(data)
          data.age = 30;  //发送之前增加的属性
          return queryString.stringify(data);    //利用对应方法转换格式
        }]
      })
    复制代码

    axios并发请求,通过axios。all()方法,需在两个请求都完成后才能被成功调用

    复制代码
    export default {
      name: 'hello',
      created(){
    
        function http1(){
          return HTTP.get("test-axios")
        }
    
        function http2(){
          return HTTP.post("test-post-axios")
        }
       //注意此时常使用axios.spread()方法接收多个响应数据
          axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{
              console.log(res1)
              console.log(res2)
          }))
          .catch((error) =>{
            if (axios.isCancel(error)) {
              console.log(error.message);
            }else{
                console.log(error)
            }
        })
    
      }
    }
    复制代码

    axios拦截器

    (1)拦截请求(在发送请求之前做某事)

    复制代码
    axios.interceptors.request.use(function(config){
        //在发送请求之前做某事
        console.log("拦截")
        console.log(config)  //单次请求的配置信息对象
        return config;  //只有return config后,才能成功发送请求
      },function(error){
        //请求错误时做些事
        return Promise.reject(error);
      });
    复制代码

    (2)拦截响应

    HTTP.interceptors.response.use(function(data){
          console.log("response")
          console.log(data)  //响应数据
          return data;   //只有return data后才能完成响应
      })

    当大量使用axios时,可以将axios作为vue的插件全局使用

    首先需要安装axios,vue-axios

    npm install axios vue-axios --save

    将其作为插件

    Vue.use(VueAxios, Axios)   //注意顺序与大小写

    当在其他任意组件中使用时可使用以下方式:

    this.$http[method]()
  • 相关阅读:
    python利用pip安装模块出现报错:ReadTimeoutError: HTTPSConnectionPool的解决方法
    20届一战南理工软件工程(专硕)824
    python—socket编程
    python—异常处理
    python—面向对象设计
    python—装饰器
    python—模块与包
    python—迭代器,生成器与for循环机制
    python—文件处理
    python—函数
  • 原文地址:https://www.cnblogs.com/qhantime/p/11454737.html
Copyright © 2020-2023  润新知