vue请求axio的使用详解

安装
npm install axios

创建axios实例

import axios from 'axios'
//判断是否是本地开发环境，这样上线就不用更改，不了解，可以直接写
const host = const host = process.env.NODE_ENV === "development"? "模拟地址" : "真实地址"
const ajax = axios.create({
    basURL:host,
    timeout: 6000,//请求超时时间
 	headers: {'X-Custom-Header': 'foobar'}//配置请求头
})

axio的拦截器

对请求拦截

ajax.interceptors.request.use((req)=>{
    //请求拦截下的数据，可以添加自己的处理和操作
    比如添加loading效果
    return req
})

对响应的拦截

ajax.interceptors.response.use((res)=>{
    //响应拦截下的数据，可以添加自己的处理和操作
    比如添加loading效果或者
    return res.data.body
})
export default ajax//最后导出

使用方式

全局使用在main.js（主入口）中

import * as $http from './requests'
Vue.protoype.$http = $http
这样可在this中调用$http来使用ajax

新建一个api文件夹，用于管理请求的js文件，在文件夹中分块，建立js文件

//简单示例一个 创建一个api.js
import request from '@/utils/request' //引入导出的ajax
//使用方式也有2种
export const getData= （params）=>{ //get请求
    axios.get('data/user', {
    params: {
      ID: params
    }
  })
}
expot const getData2 = (params) =>{ //post请求
    axios.post('data/user', {
        ...params
  })
}
//第二种方式
export function getData3(data) { //post
  return request({
    url: 'data/list',
    method: 'post',
    data: { ...data }
  })
}

export function getData4(id) { //get
  return request({
    url: 'data/one?id=' + id,
    method: 'GET'
  })
}

axio基于promise调用后返回一个then（callback）方法，

在vue页面只需要引入调用即可

<script>
import { getData, getData2, getData4 } from '@/api/api'
    export default {
         data() {
              return {
              }
         }，
        methods: {
        const params = '你传的参数'
        getData(params)
         .then(function (response) {
                console.log(response);
              })
          .catch(function (error) {
                console.log(error);
              });
    }
    } 
</script>

vue请求axio的使用详解

vue请求axio的使用详解

猜你喜欢