axios在vue中的使用

vue项目的创建

1、vue3.0安装命令 npm install -g @vue/cli

检查是否安装成功命令  vue -V

2、新建文件夹，在编辑器中打开，打开终端

使用命令创建vue项目   vue create xxx   根据提示进行下一步

3、脚手架搭建好了之后

npm install axios  // 安装axios

axios在单页面的使用

直接引入  import axios from "axios";就可以使用了

并发请求：同时进行多个请求，并统一处理返回值，axios.all( )与axios.spread( )的用法

                 

 错误处理：请求拦截器、响应拦截器

axios的进一步封装

1、在src目录下新建文件夹以及二级文件

2、创建api管理文件

const STUDENT_API = {    
    // 获取学生列表    
    getstudentList: {       
        method: 'get',        
        url: '/studentList'   
    },   
    // 新建学生  form-data   
    addStudentForm: {    
        method: 'post',       
        url: '/student/add'  
     },   
     // 新建学生  application/json 
     addStudentJson: {       
         method: 'get',    
         url: '/student/editJson'    
     },   
     // 编辑学生    
     editStudent: {    
          method: 'put',      
          url: '/student/edit' 
     },  
     // 删除学生  
     delStudent: {     
         method: 'delete',    
         url: '/student/delete'    
     }
}
export default STUDENT_API

3、对axios封装，新建文件http.js

import axios from 'axios'import service from './studentApi'// service 循环遍历输出不同的请求方法// 创建一个axios实例let instance = axios.create({    baseURL: 'http://113.141.174.129:88/jeecg-boot',    timeout: 1000});// 包裹请求方法的容器const Http = {};// 请求格式/参数的统一for (let key in service) {    let api = service[key]   // url、method    // async 作用：避免进入回调地狱    Http[key] = async function (        // 请求参数get：url,put,post,patch(data),delete：url        params,        // 标识是否是form-data请求        isFormData = false,        // 配置参数        config = {}    ) {        let newParams = {}        // content-type是否是form-data的判断        if (params && isFormData) {            newParams = new FormData()            for (let i in params) {                newParams.append(i, params[i])            }        } else {            newParams = params        }        // 不同请求的判断        let response = {};  // 请求的返回值        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {            try {                response = await instance[api.method](api.url, newParams, config)            } catch (err) {                response = err            }        } else if (api.method === 'delete' || api.method === 'get') {            config.params = newParams            try {                response = await instance[api.method](api.url, config)            } catch (err) {                response = err            }        }        return response; // 返回响应值    }}// 拦截器的添加instance.interceptors.request.use(    config => {        // 发起请求前做点什么        return config    }, err => {        // 请求错误        return Promise.reject(err)    })// 响应拦截器instance.interceptors.response.use(    res => {        // 请求成功        return res    }, err => {        return Promise.reject(err)    })export default Http

4、在main.js中引入

import Http from './service/http'
// 把Http挂载到vue实例上
Vue.prototype.$Http = Http

5、在页面的引用

// 获取列表async getList() {  let res = await this.$Http.getstudentList();  console.log(res);},// 新建学生async addStudent() {  let academicYearID = "8a81895e6cef8b58016cefe031550058";  let res = await this.$Http.addStudentForm({    academicYearID: academicYearID  });  console.log(res);}

6、请求携带token的写法

// request interceptorservice.interceptors.request.use(config => {  const TOKEN = localStorage.getItem('userToken'); // 用户token  if (TOKEN != null) {    config.headers['X-Access-Token'] = TOKEN // 让每个请求携带自定义 token   }  const URL = localStorage.getItem('locationUrl')  config.headers['tenant'] = URL // 让每个请求携带自定义域名  return config}, (error) => {  return Promise.reject(error)})