zoukankan      html  css  js  c++  java
  • 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]()
  • 相关阅读:
    (BFS 二叉树) leetcode 515. Find Largest Value in Each Tree Row
    (二叉树 BFS) leetcode513. Find Bottom Left Tree Value
    (二叉树 BFS DFS) leetcode 104. Maximum Depth of Binary Tree
    (二叉树 BFS DFS) leetcode 111. Minimum Depth of Binary Tree
    (BFS) leetcode 690. Employee Importance
    (BFS/DFS) leetcode 200. Number of Islands
    (最长回文子串 线性DP) 51nod 1088 最长回文子串
    (链表 importance) leetcode 2. Add Two Numbers
    (链表 set) leetcode 817. Linked List Components
    (链表 双指针) leetcode 142. Linked List Cycle II
  • 原文地址:https://www.cnblogs.com/pomelott/p/8453262.html
Copyright © 2011-2022 走看看