[JavaScript知识库]vue-登录功能流程

一、登录
1、找到数据接口 2、封装请求方法 3、请求调用登录 4、处理响应结果

二、代码块解析
1、在utils目录下新建request.js创建axios实例
安装axios
npm install axios -S

(1)在request.js中引入axios

import axios from 'axios'

(2）在request.js创建axios 登录接口

export const Login = axios.create({
BASE_URL= “https://xxxxxx”//基础路径
})

（3）在 api目录下新建user.js封装post、get接口并导入request.js

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

（4）在user.js中封装各种接口

//登录

  export const Login = (data)=>{
        return request({
            method:'POST'
           url:'xx/xx/xx'
         })
   }

（5）在登录页面使用
5.1、导入utils.js

import {request} from '@/api/user.js'

5.2、在methods方法里面使用,期间使用async和awite同步接口、使用try，catch检查

methods:{
           async IsLogin(){
                  try{
                      let res = awite request(this.phone,this.code);
                        console.log('成功')
                      Tost.success('登陆成功')
                  }catch{
                        console.log('失败')
                         Tost.fail('登录失败')
                      }
               
                }
          }