1.创建request.js文件，封装基础配置
g/1710.html" class="superseo">import axios from 'axios'
export function request(config) {
? // 1.创建axios的实例
? const instance = axios.create({
? ? // 设置基础的url配置项，这样接口处的url前面就不用写url:'http://127.0.0.1:8000/api/home'，直接写成 url:'/api/home', 就可以了
? ? baseURL: 'http://127.0.0.1:8000/',
? ? //设置请求超时时间
? ? timeout: 5000
? })
? // 2.axios的拦截器，用不到的可以忽略这节
? // 2.1.请求拦截的作用
? instance.interceptors.request.use(config => {
? ? return config
? }, err => {
? ? console.log('请求拦截err: '+err);
? })
? // 2.2.响应拦截
? instance.interceptors.response.use(res => {
? ? return res.data
? }, err => {
? ? ? ? console.log('响应拦截err: '+err);
? })
? // 3.发送真正的网络请求
? return instance(config)
}
2、创建api.js文件，引入request.js，并写请求接口
// 导入封装好的Axios
import {request} from './request' //注意request.js的相对路径问题
//1. get请求---获取首页的多个数据
export function getHomeMultidata() {
? return request({
? ? url:'/api/home',
? ? method:'get',
? ? // 可以带参数也可以不带参数
? ? // params: {
? ? //? ? userName: 'Lan',
? ? //? ? password: '123'
? ? // }
? })
}
// 2.1 post请求---传输json数据时，获取电视剧多个数据
export function getTvshowMultidata() {
? return request({
? ? url:'/api/Tvshow',
? ? headers: {
? ? ? 'Content-Type': 'application/json'
? ? },
? ? method:'post',
? ? data: {
? ? ? ? userName: 'Lan',
? ? ? ? password: '123'
? ? }
? })
}
//2.2 post请求---传输文件流,表单Form Data 数据时
export function getMovieMultidata() {
? return request({
? ? url:'/api/Movie',
? ? headers: {
? ? 'Content-Type': 'multipart/form-data';
? ? },
? ? method:'post',
? ? data: {
? ? ? ? userName: 'Lan',
? ? ? ? password: '123'
? ? }
? })
}
3、vue页面根据路径引入接口地址并调用
created() {
? ? ? // 在方法中调用函数即可
? ? ? ? getHomeMultidata().then(res=>{}).catch(err=>{})
? ?????? ?getTvshowMultidata().then(res=>{}).catch(err=>{})
? ? },