vue请求axio的使用详解

vue请求axio的使用详解

• 安装

• npm install axios

• 创建axios实例

  import axios from 'axios'
  //判断是否是本地开发环境，这样上线就不用更改，不了解，可以直接写
  const host = process.env.NODE_ENV === "development"? "模拟地址" : "真实地址"
  axios.defaults.withCredentials = true //开启后服务器才能拿到cookie
    axios.defaults.crossDomain = true;//配置axios跨域
    axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'//配置默认请求头
  
  const ajax = axios.create({
      basURL:host,
      timeout: 6000,//请求超时时间
  
  })
  
  

• axio的拦截器

  • 对请求拦截

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

  • 对响应的拦截

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

  • 使用方式

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

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

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

     //简单示例一个 创建一个api.js
     import  request    from '@/utils/request' //引入导出的ajax
     //使用方式也有2种
     export const getData= （params）=>{ //get请求
         request.get('data/user', {
         params: {
           ID: params
         }
       })
     }
     expot const getData2 = (params) =>{ //post请求
         request.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>