axios的使用

1.axios使用

1.Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 返回一个Promise对象

在本地终端使用npm安装 ：npm install axio

2.可以向 axios 传递相关配置来创建请求

async作为关键字放在函数前面,如果调用axios请求的是个匿名函数，那就放在匿名函数前面

// 发起一个post请求

//await放在axios请求前面，因为axios返回一个Promise对象，所以await等待这个对象返回结果

let {data:{data,meta}} = awit axios({

method: 'post',

url: 'http://api.sliyi.cn/api/private/v1/login',

data: {

username: this.form.username,

lastName: this.form.password

}

});

// 什么时候跳转  有token的时候

if(meta.status!==200) return this.$message.error(meta.msg)

// 如果成功，要token

sessionStorage.setItem('admin_token',data.token)

2.路由导航守卫

1.前置守卫

router.beforeEach((to,from,next)=>{

// to:要访问的路径

// from：从哪个路径来

// next（） 放行

if(to.path=='/login') return next()

// 获取缓存中的token

let token = sessionStorage.getItem('admin_token')

if(!token) return next('/login')

next() //放行

})

3.配置路由信息

在router文件夹的index.js文件中配置路由信息
1.const routes = [
    {
    path:'/',
    name:'login',
    component:()=>import('./views/Layout.vue')，
//如果需要嵌套路由
    children:[
    {
        path:'/xxx',
        name:'xxxx',
        component:()=>import('./views/xxxxx.vue')，
},{...},{...}]
},{...},{...}]

3.axios API

1.在src中新建一个名为api的文件夹，在其中建两个文件request.js和user.js

2.在request.js中创建axios实例

import axios from 'axios' //引入

// 创建axios实例

const service = axios.create({

    // 请求地址的公共部分

    baseURL: process.env.VUE_APP_BASE_API,

    // 超时时间

    timeout: 5000,

  });

export default service

其中，VUE_APP_BASE_API是在文件根目录下创建一个名为.env的文件VUE_APP_BASE_API='http://api.sliyi.cn/api/private/v1'

3.在user.js中管理所有的请求接口
import service from "./request"; 引入axios实例

抛出各个接口即可
export const Login = (data)=>{
    return service({
        method:'post',
        url:'/login',
        data  这里的data是post请求传过来的参数，其他单词不可以
)}    

4.前端vue页面发起post请求
<script></script>标签里面先引入要用到的请求接口
import {Login} from '@/api/user'
方法中：
    async login(){
        let {解构赋值} = await Login(传参)
    }