vue中使用axios

vue axios使用

中文文档

axios中文文档

安装

添加依赖
npm i axiso vue-axios

添加到入口

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

默认案例

执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
执行 POST 请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

封装使用

配置axiso并封装get和post请求

// utils/request.js
import axios from 'axios'; // 引入axios

// 封装axios
// 创建实例
const instance = axios.create({
  // 配置axiso
  baseURL: '',  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
 
  timeout: 3000, // 如果请求话费了超过 `timeout` 的时间，请求将被中断,单位毫秒
  headers: { 'content-type': 'application/json; charset=utf-8' }  // 自定义请求头
});

// 添加请求拦截器
instance.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response.data;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

// 封装get和post 请求
class Http {
 /**
   * 
   * @param url  请求urL
   * @param params  http params
   * @returns Promise<any>
   */
   get(url, params) {
    return instance({
      method: 'get',
      url,
      params,
    });
  }
 /**
   * 
   * @param url 请求url
   * @param data http body
   * @param params http params
   * @returns Promise<any>
   */
  post(url, data, params){
    return instance({
      method: 'post',
      url,
      params,
      data,
    });
  }
}

const http = new Http();

export default http;

使用

// api/playList.js 
import http from '@/utils/request';
export const getPlayDetail = async (id) => {
  return await http.get('/playlist/detail', id);
};

//index.vue
import { getPlayDetail } from '@/api/playList'

getPlayDetail({id: 1}).then(res=>{
	console.log(res)       // res 为请求获取的数据   	
})