第一步:

项目下新建文件夹api和user.js用来存储调取的接口,新建文件夹utils和request.js用来封装axios

 第二步:

request.js写入如下代码

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://192.168.2.76:8102/eduservice/ucenter-member/', // api的base_url
  timeout: 15000,                 // 请求超时时间
  headers: {
    'key': 'value'
  }
})

// 拦截请求
instance.interceptors.request.use(config => {
  // 发送请求之前做些什么
  return config
}, error => {
//  请求错误做些什么
  return Promise.reject(error)
})

// 拦截响应
instance.interceptors.response.use(res => {
  // 对响应数据做些什么
  return res
}, error => {
// 对响应错误做些什么
  return Promise.reject(error)
})

export default instance

user.js写入如下代码

import request from '@/utils/request.js'

export function login (params) {
  return request({
    url: '/login',
    method: 'post',
    data: params
  })
}
export function reg (params) {
  return request({
    url: '/reg',
    method: 'post',
    data: params
  })
}

第三步:

以login.vue为列,将js引入页面

 import {login,reg} from "@/api/user.js";

使用 loginBtn为登录按钮的点击事件

    loginBtn(){
        login({mobile:this.mobileVal,password:this.passwordVal}).then(result=>{

        })
      }

 如此即可

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐