vue-axios

最新推荐文章于 2024-08-17 20:33:58 发布

lvzekun-IT

最新推荐文章于 2024-08-17 20:33:58 发布

阅读量353

点赞数

分类专栏：前端基础前端学习文章标签： vue-axios

本文链接：https://blog.csdn.net/m0_37727198/article/details/103140751

版权

前端基础同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端学习

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中创建axios实例，定义请求方法，并在Vue组件中调用这些方法进行API数据交互，实现前后端数据的获取和发送。

摘要由CSDN通过智能技术生成

1.建立axios实例

//lzk 2019-8-29
import service from 'axios'
import {baseUrlTrial} from "../index";
import setRequestHeader from "../setRequestHeader";
import {interceptors} from "../interceptor";

// 创建axios实例
const axios = service.create({
    baseURL:baseUrlTrial, // api 的 base_url
    // baseURL: "http://10.98.15.90:9110/", // api 的 base_url
    timeout: 50000, // 请求超时时间
    // contentType: "application/json;charset=utf-8",
    // dataType: "json",
    ...setRequestHeader
});
interceptors(axios);


export default axios

2.引入实例，定义请求方法。

//lzk 2019-8-29
import axios from "./index.js"
import axiosline from "./indexLine.js"
import {createSerialNumber} from "../../utils/random";
//分页
export function getTrailList(obj,objtotal) {
  obj.seqno = createSerialNumber()
  return axios({
    url: 'conversion/search?currentPage='+objtotal.currentPage+'&pageSize='+objtotal.pageSize,
    method: 'post',
    data: obj,
  });
}

3.vue 文件中，引入方法调用。

 import {
    getTrailList,
    DelTrialOption,
    EditTrailState,
    lineSearchAll
  } from '../../../../../../api/trialOperation/trialOperation.js'

GetListTrialOperation(obj, objtotal) {
        this.loadingTable = true;
        getTrailList(obj, objtotal).then(response => {
          if (response.data.respDesc === 'SUCCESS') {
            this.tableProject = response.data.response.list;
            this.tableTrail.total = response.data.response.total;
            this.cardTrail.total = response.data.response.total;
            for (let i = 0; i < this.tableProject.length; i++) {
              if (this.tableProject[i].state === 0) {
                this.tableProject[i].switch = false;
              } else {
                this.tableProject[i].switch = true;

              }
            }
            this.loadingTable = false;
            this.cardTrail.pageSize = this.tableTrail.total;
            this.GetCardTrialOperation(this.OperationSearch, this.cardTrail);
          } else {
            console.log(response);
          }
        }).catch(err => {
          console.log(err);
        })