码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-02-18 22:23:11      阅读:1302      评论:0      收藏:0      [点我收藏+]

标签:turn   axios.get   example   error   ext   post   返回   transform   function   

使用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);    //利用对应方法转换格式
    }]
  })

 

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

标签:turn   axios.get   example   error   ext   post   返回   transform   function   

原文地址:https://www.cnblogs.com/pomelott/p/8453262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!