Axios-Vue

axios中文文档

安装

npm i axios

基本使用

引入

import axios from 'axios';

使用

// GET请求
axios({
    method:'get',
    url:'http://api/'
}).then(res=>{
    console.log(res);
})
//简
axios.get('url').then()
//POST请求
axios({
    method:'post',
    url:'http://api/',
    data:{
        user: 'muieay',
        pwd: '123',
        headers: { 'content-type': 'xxx' },
    }
}).then(res=>{
    console.log(res);
})
//简
axios.post('url',{} ).then()		

默认情况下，axios将 JavaScript 对象序列化为 JSON 。 需要对请求体编码进行处理

此处使用qs演示：

安装

npm i qs

引入

import qs from 'qs';

使用

//POST请求
axios({
    method:'post',
    url:'http://api/',
    //对请求体编码进行转换
    data:qs.stringify({
        user: 'muieay',
        pwd: '123',
        headers: { 'content-type': 'xxx' },
    })
}).then(res=>{
    console.log(res);
})

其他方法

封装请求

1. 创建utils\request.js文件

   import axios from "axios"
   import qs from 'qs'
   
   const instance = axios.create({
   	baseURL: 'http://api', //通用后端请求地址前缀
   	timeout: 5000 //超时时间（毫秒)
   });
   
   // 添加请求拦截器
   
   // 数据获取之前
   instance.interceptors.request.use(
   	config => {
   		if (config.method === 'post') {
   			config.data = qs.stringify(config.data)
   		}
   		return config
   	},
   	error => {
   		return Promise.reject(error);
   	}
   );
   
   // 数据获取之后
   instance.interceptors.response.use(
   	response => {
   		return response;
   	},
   	error => {
   		return Promise.reject(error);
   	}
   );
   export default instance
   

2. 规范API接口，创建api/index.js

   方式一：

   import instance from '../utils/request.js'
   const http={
   	getMsg(){
   		return instance.get('/url')
   	}
   }
   export default http
   

   使用：

   import http from '../api/index'
   
   http.getMsg().then(res=>{
       console.log(res);
   })
   

   方式二：

   import instance from '../utils/request.js'
   
   export const getData=()=>{
       // 返回promise对象
       return instance.get('/URL')
   }
   

   使用：

   import {getData} from '../api/index'
    
   getData().then(res=>{
   	console.log(res);
   })
   

其他

vue-cli项目前端跨域配置

配置vue.config.js

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.xxx.cn', //对应服务器地址(我要跨域请求的地址)
        changeOrigin: true, //允许跨域
        ws: true,
        pathRewrite: {
          '^/api': ''	//例如跨域https://www.xxx.cn/get网址，使用就直接写/api/get
        }
      }
    }
  }
}
//简
module.exports = {
  devServer: {
    proxy: 'https://www.xxx.cn'	//这里写你要跨域请求数据的网址
  },
}

params选项传参

用axios自带的params选项传参

axios.get('http://xxx', {
    params: {
        id: 5678,
        info: 'data within params'
    }
}).then()