Axios的异步请求和封装

1.下载axios

npm i --save axios

2.在src文件加下的main.js种添加

import axios from 'axios'
Vue.prototype.axios = axios

3.我是GET请求,

  created() {
    //跨域
    this.axios({
      method: "get",
      url:
        "https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=0D02D6104E3E11EAB47F3F42ADC0A3222CBE29F26413436DA46D5E8940E063A0&optimus_risk_level=71&optimus_code=10" //猫眼的数据
    }).then((res)=>{
        console.log(res)
    })

提示跨域报错

解决

4.在src下创建api文件,再创建there.js

import axios from 'axios'
export function thereAxios() {
    return new Promise((resolve, reject) => {
        axios({
            method: "get",
            url:
                "/api/ajax/movieOnInfoList?token=&optimus_uuid=0D02D6104E3E11EAB47F3F42ADC0A3222CBE29F26413436DA46D5E8940E063A0&optimus_risk_level=71&optimus_code=10",
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

注意:此时的"https://m.maoyan.com/“被”/api"代替了

5.在vue.config.js下配置反向代理

module.exports = {
  devServer: {

    //设置反向代理
    proxy: {
      '/api': {
        target: 'https://m.maoyan.com/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },


    overlay: {
      warnings: false,
      errors: false
    }
  },
  lintOnSave: false // 关了eslint 检查
}

6.在请求数据的页面请求

(1)引入

第4步起名thereAxios,所以这边就引入这个名字

import {thereAxios} from "@/api/there.js"

(2)请求

 created() { 
    thereAxios().then((res)=>{
        console.log(res)
    }).catch((err)=>{
            console.log(err)
        })
  }

7.数据回来

拦截器封装

(1)在until文件下新建request.js

import axios from "axios"

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

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么

    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default service

(2)在api文件下新建axiosapi.js

import service from "@/util/request.js"
export function axiosrequest(){
    return new Promise((resolve,reject)=>{
        service.request({
            url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
            method:"get"
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

(3)在页面应用

 created() {
        axiosrequest().then((ok)=>{
            console.log(ok)
        }).catch((err)=>{
            console.log(err)
        })
    },